锚点 JS控制div跳转到指定的位置的几种解决方案总结

于 2018-04-10 09:55:09 发布
阅读量6.4k 收藏 4
点赞数

总结一下自己在写这个需求遇到的问题，相信大家应该是经常遇到的。即要求滚轮滚动到指定的位置。先看下基本的解决方案。

1.给链接a加个#的方式来实现跳转。（锚点方法）这里直接贴下代码:

?
1
2
3
4
5
6
7
8
< 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样式：

?
1
2
3
4
5
6
7
8
9
div {
      height : 800px ;
      width : 400px ;
      border : 2px solid black ;
    }
#container{
      position : fixed ;
      margin : 50px 500px ;
}

该锚点法，不需要任何的js代码，即可实现跳转的方法。缺点：点击链接url发生变化，刷新的话会有问题。此方法貌似只能在.html后缀的页面才能起作用，对于.cshtml页面不起作用。

2.用animate属性，当点击锚点后，页面滚动到相应的DIV。接着上面的代码，具体添加如下代码：

html页面：
  

?
1
2
3
4
5
6
7
8
< 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样式页面同上，看下js代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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 ;
   });
});

3.简单的window.scrollTo方法使用，这里不再详细说，看下用法。

即滚动到坐标为(100,500)的地方。比较单一，且没有缓慢的效果

?
1
2
3
   function scrollWindow(){
   window.scrollTo(100,500);
}

4.用js的srollIntoView方法进行使用。这里贴下代码：

html页面：
 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< 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 >

js代码如下：

?
1
2
3
4
5
6
[].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),前面是对象，通常原生的获取对象都是下面的写法：

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

那么如果用jquery来调用该方法的话，需要写成下面这样的：

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

5.如果需要缓慢的移动滚动可添加一个定时器。看下我们这个需求。先贴下代码：

js部分：

?
1
2
3
4
5
6
7
return cPageView.extend({
       pageid: 10320608681,
       hpageid: 10320608681,
       events: {
         "click .nav_list li " : "setHightLight" ,
       },
})

点击事件部分：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//设置标签选中，并且滚动到相应的位置
      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下测试和真机测试，效果都还行，这个需求主要是，没法通过高度来控制完成，因为，我们这个中间的内容元素都是动态加载进来的，高度是变得

因此我通过控制它的index来控制，固定其div模块，距离顶部的高度top为75px,滚动单个的div模块，而不是整个的body一起滚动。

兵_哥哥
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值