位置:首页 > JavaScript > JQuery >

jquery返回顶部特效代码

字号+ 作者:micloud 来源:www.seoalphas.com 2018-09-19 06:59 浏览量:2635

网页悬浮返回顶部图标可以说是一项非常常见切比较实用的功能,可以使用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部分:

<script>
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文件

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • fullCalendar改造计划之带农历节气节假日的万年历

    fullCalendar改造计划之带农历节气节假日的万年历

    浏览次数:5838

  • jQuery动态获取修改background-image:url()属性的值

    jQuery动态获取修改background-image:url()属性的值

    浏览次数:5583

  • 使用JavaScript复制指定的页面文字到剪贴板 js复制页面文字

    使用JavaScript复制指定的页面文字到剪贴板 js复制页面文字

    浏览次数:4647

  • jQuery中ajax的4种常用请求方式

    jQuery中ajax的4种常用请求方式

    浏览次数:4460

网友点评
评论区域