JavaScript控制Div滚动定位的5种常用方法详解

本文汇总了开发过程中关于页面滚动定位需求的常见解决方案，旨在帮助开发者应对滚轮滚动至指定位置的实际场景。

传统锚点跳转方案

第一种方案是利用HTML锚点链接实现跳转。具体代码示例如下：


<div id="container">
    <a href="#div1">div1</a>
    <a href="#div2">div2</a>
    <a href="#div3">div3</a>
</div>
  <div id="div1">div1</div>
  <div id="div2">div2</div>
  <div id="div3">div3</div>

对应的CSS样式定义如下：


  div {
      height: 800px;
      width: 400px;
      border: 2px solid black;
    }
 #container{
      position: fixed;
      margin:50px 500px;
 }

该方法无需编写任何JavaScript代码即可实现跳转功能。然而，其缺点在于点击链接后URL地址会发生变化，导致刷新页面时可能出现异常。此外，此方法在.html后缀的页面中有效，但在.cshtml等动态页面中可能无法正常工作。

jQuery animate动画滚动

第二种方案是使用animate属性，在点击锚点后通过动画效果使页面平滑滚动到对应的DIV区域。基于上述HTML结构，具体添加的JavaScript代码如下：

HTML页面结构如下：


<div id="container">
     <p id="p1">div1</p>
     <p id="p2">div2</p>
     <p id="p3">div3</p>
</div>
  <div id="div1">div1</div>
  <div id="div2">div2</div>
  <div id="div3">div3</div>

CSS样式与前文相同，重点查看JavaScript实现部分：


 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
$(document).ready(function() {
  $("#p1").click(function() {
    $("html, body").animate({
      scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});
    return false;
  });
  $("#p2").click(function() {
    $("html, body").animate({
      scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
    return false;
  });
  $("#p3").click(function() {
    $("html, body").animate({
      scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
    return false;
  });
});

window.scrollTo基础用法

第三种方案是使用简单的window.scrollTo方法，此处不再赘述具体原理，直接展示用法示例。

该方法可将页面滚动至坐标(100,500)的位置。其局限性在于功能较为单一，且不支持平滑滚动的视觉效果。


  function scrollWindow(){
  window.scrollTo(100,500);
}

scrollIntoView API应用

第四种方案是利用JavaScript原生的scrollIntoView方法。具体代码实现如下：

HTML页面结构如下：


 <ul>
    <li><a href="javascript:;" data-tab="eat">吃饭</a></li>
    <li><a href="javascript:;" data-tab="sleep">睡觉</a></li>
    <li><a href="javascript:;" data-tab="walk">逛街</a></li>
 </ul>
<div >
  <div data-tab="eat" style="background:cyan; height:500px;">
    吃饭
  </div>
  <div data-tab="sleep" style="background:lightgreen;height:2000px;">
    睡觉
  </div>
  <div data-tab="walk" style="background:LightSalmon;height:1000px;">
    逛街
  </div>
</div>

JavaScript代码如下：


[].slice.call(document.querySelectorAll('a')).forEach(function(el){
      el.addEventListener('click', function(){
        var target = document.querySelector('div[data-tab=' + this.getAttribute('data-tab')+ ']' )
        target.scrollIntoView(true);
      })
 })

需要注意的是，调用object.scrollIntoView(bool)时，括号内为布尔值参数。在原生JavaScript中获取DOM对象通常采用如下写法：


 document.getElementById('#xxx' ).scrollIntoView(true);

若使用jQuery调用该方法，则需调整为以下形式：


 $('#xxx')[0].scrollIntoView(true);

动态内容平滑滚动实现

第五种方案是在滚动过程中添加定时器以实现缓慢移动的平滑效果。针对具体业务需求，代码示例如下：

JavaScript核心逻辑部分：


 return cPageView.extend({
      pageid: 10320608681,
      hpageid: 10320608681,
      events: {
        "click .nav_list li ": "setHightLight",
      },
})

点击事件处理部分：


//设置标签选中，并且滚动到相应的位置
     setHightLight: function (e) {
       var obj = $(e.currentTarget);
       var _tag = this.$el.find('.nav_list li');
       var $innerText = this.$el.find('.fsp_hd');
       var items = $(".fs_prd_wrap").find('.item');
       this.$el.find('.nav_list li').removeClass('current');
       var itemIndex = "";
       var objCurrent = [];
       obj.addClass('current');
       var scrollMove = function (scrollTo, time) {
         var scrollFrom = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
         var count = 0;
         var every = 10;
         scrollTo = parseInt(scrollTo);
         time /= every;
 
         var interval = setInterval(function () {
           count++;
           document.documentElement.scrollTop = document.body.scrollTop = (scrollTo - scrollFrom) / time * count + scrollFrom;
           if (count >= time) {
             clearInterval(interval);
           }
         }, every);
       };
       for (var i = 0; i < items.length; i++) {
         var self = this;
         items[i].index = i;
         if (obj.index() == items[i].index) {
           items.each(function () {
             var currentItem = $(this);
             // items[i].scrollIntoView(false);     
             scrollMove(items[i].offsetTop-75, 500);
           });
           
           // console.log(items[i].index);
         }
       }
     },

运行效果如图所示：传统锚点跳转方案经Chrome浏览器及真机测试，该方案表现良好。由于页面中间的内容元素为动态加载，导致高度实时变化，因此无法直接通过固定高度控制滚动完成。

为此，我们通过控制DOM元素的索引来固定特定DIV模块距离顶部的偏移量为75px，从而实现单个div模块的滚动，而非整个body一起滚动。

以上即为本文的全部内容，希望能为各位的学习提供有益参考，也欢迎大家继续支持本站。

JS实现页面滚动到指定位置的多种方案对比

传统锚点跳转方案

jQuery animate动画滚动

window.scrollTo基础用法

scrollIntoView API应用

动态内容平滑滚动实现

实用工具推荐