jquery返回顶部特效代码网页滚动返回顶部特效

最新推荐文章于 2023-02-05 07:31:21 发布

cangxie8

最新推荐文章于 2023-02-05 07:31:21 发布

阅读量919

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签：网页返回顶部返回顶部代码

本文链接：https://blog.youkuaiyun.com/seoalphas/article/details/82766569

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用纯JavaScript实现的带有过渡效果的返回顶部功能，此功能通过简单的HTML结构配合CSS样式美化，并利用JavaScript监听滚动事件及点击事件，使页面在滚动到一定位置时显示返回顶部图标，点击该图标时页面能平滑滚动回顶部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页悬浮返回顶部图标可以说是一项非常常见切比较实用的功能，可以使用HTML来实现，但是返回顶部效果太过僵硬，体验不好，这里分享一个纯js返回顶部切具有过渡效果的实例。

QQ截图20180919065829.jpg

效果如上图所示。

具体代码如下：

HTML部分：

<div class="top"></div>

CSS部分：

.top {
    width: 0.6rem;
    height: 0.6rem;
    background: rgba(255,255,255,0.8) url(../images/top.svg) no-repeat;
    background-size: 0.6rem 0.6rem;
    position: fixed;
    right: .1413333333rem;
    bottom: 1.26rem;
    z-index: 8;
    cursor: pointer;
    display: none;
    border-radius: 50%;
-webkit-box-shadow: 0 0 0.128rem rgba(0,0,0,0.2);
    box-shadow: 0 0 0.128rem rgba(0,0,0,0.2);
}

JavaScript部分：

var topMain=$(".head").height()
    $(window).scroll(function(){
//如果滚动条顶部的距离大于topMain则就nav导航就添加类.nav_scroll，否则就移除。
if ($(window).scrollTop()>topMain){
$(".top").slideDown(500);
}
else{
$(".top").slideUp(500);
}
    });
$(".top").click(function(){$("body,html").animate({scrollTop:0},500)});
</script>

这里返回顶部图标使用的是一个.svg格式文件，好处就是可以无限放大而不失真,这里一并提供下载：

点击下载top.svg文件