页面加载完毕后滚动条自动滚动一定位置

  昨天有一需求,是希望页面加载完毕后向左自动滚动一定位置。

  一直以为只要给页面的 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>