jQuery 返回顶部代码分享
返回顶部可以说是一个网站必备的功能,特别是很长的网页,方便用户能够一次性的返回导航条,而无需手动滑动,这篇文章将给大家分享一个简单的返回顶部代码。
示例地址:http://run.wenjiangs.com/code/#/?code=enSxkp25
返回顶部代码其实很简单,我们使用 jQuery 的自定义动画就能做出一定的缓冲效果,比起直接跳转,看起来更适合网页的展现,首先我们需要一个返回顶部的按钮,比如下面的 HTML 代码:
<div class="backtop" title="回到顶部">TOP</div>
我们添加一点样式:
.backtop{ position:fixed; right:30px; bottom:-50px; width:40px; height:40px; line-height:30px; font-size:12px; color:#FFF; text-align:center; cursor:pointer; background-color:#333; border-radius:6px 6px 0 0; box-shadow:0 0 3px rgba(0, 0, 0, 0.3); }
当鼠标移动到按钮上面的时候,我们改变其背景颜色:
.backtop:hover { background-color:#21d2af; }
好了基本的样式我们就编写完成了,接下来我们来看看 JavaScript 代码。
首先返回顶部的按钮并不是一开始就显示的,我们设置为当用户滑动网页 200px 的时候,才显示返回顶部的按钮:
$(window).scroll(function(){ var y_height = document.documentElement.scrollTop + document.body.scrollTop; //兼容ie:document.documentElement.scrollTop if(y_height > 200){ $(".backtop").stop().animate({bottom:"-10px"},300); //当滚动鼠标大于200px时出现 }else{ $(".backtop").stop().animate({bottom:"-50px"},300); //当小于200px时不出现 } });
当用户点击按钮的时候,我们返回顶部:
$(".backtop").click(function(){ $("html, body").animate({scrollTop:"0px"}, 300); });
如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。


目前还没有任何评论,快来抢沙发吧!
发布评论
需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。