DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 頁面加載完畢後滾動條自動滾動一定位置
頁面加載完畢後滾動條自動滾動一定位置
編輯:JavaScript綜合知識     

 希望頁面加載完畢後向左自動滾動一定位置,下面有個不錯的方法可以輕松幫大家實現下

昨天有一需求,是希望頁面加載完畢後向左自動滾動一定位置。    一直以為只要給頁面的 document.documentElement.scrollLeft 設置一個數值就生效,結果失望了~  今天抽空一查,才發現:  使用document.documentElement.scrollLeft 設置值,必須在人為事件觸發下才生效;  想要頁面加載完畢時自動滾動一定距離,則使用jquery的animate,如下面例子:    $("html,body").animate({"scrollLeft": "300px"}, 1000);  $("html,body").animate({"scrollTop": "300px"}, 1000);    demo:   代碼如下: <!DOCTYPE html>  <html>  <head>  <meta charset="utf-8"/>  <title>自動滾動</title>  <meta name="keywords" content=""/>  <meta name="description" content=""/>  <script type="text/javascript" src="https://www.gamebox.com/js/jquery.js"></script>    </head>  <body>  <!-- container start -->  <div class="container" style="height: 3000px; width: 3000px;">    <a class="btn" href="javascript:;">點擊</a>  </div>  <!-- container end -->    <script type="text/javascript">  /*window.onload = function(){  window.scroll(0,300);    $(".btn").on("click", function(){    document.documentElement.scrollLeft = "500";  var oTop = document.body.scrollTop || document.documentElement.scrollTop;  var oLeft = document.body.scrollLeft || document.documentElement.scrollLeft;    alert(oLeft);  });  }*/    $(function(){  $("html,body").animate({"scrollLeft": "300px"}, 1000);  });    </script>  </body>  </html> 
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved