jquery返回顶部特效代码

字号+ 作者:alpha 来源:www.seoalphas.com 2018-09-19 06:59 浏览次数(179)

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

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

标签
下一篇:没有了

本站部分技术文章为参考网上实用内容发布,目的是记录踩坑经验,若未备注来源而侵犯了您原创文章权益,请联系博主删除;对文章有不同看法的朋友欢迎在评论区留言互动

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

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

    浏览次数:1841

  • jquery给input赋值val(val)

    jquery给input赋值val(val)

    浏览次数:1735

  • jQuery实现拖动布局并将排序结果保存到数据库

    jQuery实现拖动布局并将排序结果保存到数据库

    浏览次数:847

  • 用jQuery向div中添加Html文本内容

    用jQuery向div中添加Html文本内容

    浏览次数:756

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

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

    浏览次数:727

  • FullCalendar日历插件说明文档

    FullCalendar日历插件说明文档

    浏览次数:647

  • FullCalendar应用——读取JSON数据

    FullCalendar应用——读取JSON数据

    浏览次数:532

  • FullCalendar日程安排

    FullCalendar日程安排

    浏览次数:383

网友点评
功能开发中......其实是博主懒了而已......
0.750000s