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

关注

原创最新推荐文章于 2025-12-22 06:15:00 发布 648 阅读 AI 写同款· GEO 优化 ›

如何使用CSS实现一个平滑滚动到页面顶部的效果在这个示例中，我们使用了媒体查询来根据不同屏幕尺寸调整按钮的位置，并且通过JavaScript来监听窗口大小的变化，动态调整按钮的位置。在这个示例中，我们使用了JavaScript来监听滚动事件，并在滚动距离大于200像素时显示返回顶部的按钮。通过本文的介绍，你已经学会了如何使用CSS来实现平滑滚动到页面顶部的效果，并掌握了多种实现方式。在这个示例中，我们首先设置了全局的滚动行为为平滑滚动。应该是一个位于页面顶部的元素的ID，或者可以是一个不存在的ID，因为在点击链接时，浏览器会自动滚动到页面顶部。阅读详情

在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);
});

标签

#jq js

本内容遵循 CC 4.0 BY-SA 版权协议

fastadmin:在新增页面，打开弹窗单选，参数回传阅读详情

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

相关推荐