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

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

效果如上图所示。

具体代码如下：

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

jquery返回顶部特效代码网页滚动返回顶部特效相关推荐

返回顶部php代码,网页中返回顶部代码(多种方法)另附注释说明_jquery
下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能方法一:用命名锚点击返回到顶部预设的id为top的元素 f ...
获取存储过程返回值及代码中获取返回值
获取存储过程返回值及代码中获取返回值 1.OUPUT参数返回值例: 向Order表插入一条记录,返回其标识 CREATE PROCEDURE [dbo].[nb_order_insert]( @o_b ...
获取存储过程返回值及代码中获取返回值(转)
获取存储过程返回值及代码中获取返回值 1.OUPUT参数返回值例: 向Order表插入一条记录,返回其标识 CREATE PROCEDURE [dbo].[nb_order_insert]( @o_b ...
html文本滚动到底后自动回到顶部,JS 实现DIV 滚动至顶部后固定
JS 实现DIV 滚动至顶部后固定 DIV滚动至顶部后固定 Test Div function menuFixed(id) { var obj = document.getElementById(id ...
html图片跟随鼠标,跟随鼠标的图片 - 网页特效代码|网页特效观止 - 让你的网页靓起来！...
跟随鼠标的图片 [ 发布者:在远方┊来源:本站整理┊时间:2006-03-08┊浏览: 人次 ] 网页特效|JsCode.cn|---跟随鼠标的图片 var newtop=0 var newleft= ...
html桃花特效,页面上桃花飘飘 - 网页特效代码|网页特效观止 - 让你的网页靓起来！...
页面上桃花飘飘 [ 发布者:luwei┊来源:本站整理┊时间:2005-10-23┊浏览: 人次 ] 网页特效|Linkweb.cn/Js|---页面上桃花飘飘 var plumsrc="i ...
php序顶部导航,页面上下滚动改变顶部导航的定位方式
最近碰到设计师的一个设计效果要求,其他网站也有实现: state1:当网页向下滚动时,页面header栏消失,顶部nav往上靠: state2:当网页向上滚动时,页面header栏出现,顶部nav顺着 ...
早晨太阳升起HTML5特效特效代码晚上月亮升起HTML5特效特效代码
先听我说!!! 如果各位小伙伴们真的用得上如果我能够帮得到各位小伙伴们请给我点个赞
html5 文字滑动特效代码,三种网页状态栏文字滚动特效代码
网页状态栏底部滚动文字特效代码文字滚动特效代码一: >

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

jquery返回顶部特效代码网页滚动返回顶部特效相关推荐

最新文章

热门文章

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

jquery返回顶部特效代码 网页滚动返回顶部特效相关推荐

最新文章

热门文章

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

jquery返回顶部特效代码网页滚动返回顶部特效相关推荐