记页面效果之“返回顶部”和“跳转到页面指定位置”的实现

最新推荐文章于 2023-02-27 10:58:14 发布

原创最新推荐文章于 2023-02-27 10:58:14 发布 · 617 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jq js

在长页面中，为了提升用户体验，通常会添加‘返回顶部’功能。本文介绍了两种实现方式：1) 利用a标签锚点属性进行页面内部元素跳转；2) 监听滚动事件动态显示/隐藏返回顶部按钮，并通过设置scrollTop为0实现回到顶部。考虑到地址栏变化可能带来的影响，作者推荐使用监听滚动事件的方案。此外，还提及了点击导航跳转到页面指定位置的实现，即通过导航与内容区域div的对应关系，实现平滑滚动。

在pc端的页面中当页面内容比较多，长度比较长就会出现竖向滚动条，这时候用户往下拉动滚动条浏览页面到底部后，再次返回到页面的顶部去浏览前面的内容就要往下一直拉动滚动条，用户体验很不好。许多页面都会在页面右侧放置一个固定的回到顶部的按钮之类的，当滚动条拖到到一定的高度就会出现。然后用户从底部回到顶部就很方便直接点击回到顶部即可。

实现方式有几种，这边试过2种：

1：利用a标签的锚点跳转的属性可以实现在同一页面的不同元素（即内容区）的跳转；

也就是将a链接的href属性的指向等于其要跳转到的内容区的id

这里的文字很多

这里的文字很多这里的文字很多

这里的文字很多

</div>

2.第二种方式就是监听body或html或外容器的onscroll事件，根据滚动条滚动的距离来动态显示或隐藏返回顶部的按钮，然后回到顶部其实就是外容器的scrollTop=0即可；这里还是用的jquery

$(function(){
    $('.wrap').scroll(function(){
        if($('.wrap').scrollTop() >500){
            $('.return').fadeIn(1500);
        }else{
            $('.return').fadeOut(1500);
        }
    })

    $('.return').click(function(){
        if($('.wrap').scrollTop()){
            $('.wrap').animate({scrollTop:0},1000);
        }
    }); 
});

总结：a标签的锚点跳转会改变地址栏的地址，加上一个#,不知道会不会有啥问题，所以还是方案2比较好；

再说说跳转到页面指定位置的方式也很简单，继续使用第二种方案；

业务场景：点击导航li就会滚动到大容器content里的对应的div里去。（div个数和导航对应且属于content的直接子集）

$('.navItems li').click(function(){
    $('.wrap').animate({
        scrollTop:$('.content>div').eq($(this).index()).offset().top
    },1000);
});