js点击按钮返回页面顶部
2016-08-22 03:08:28
在进行官网一类的网站建设时，经常会出现页面太长的现象，当用户滚动滚动条到最底部时返回顶部需要滚动多下滚动条，用户体验相当不好，于是就出现了当滚动条滚动到一定位置后出现返回顶部按钮，点击该按钮返回顶部，并且有一定的效果。
通常情况有两种方法，先来说第一种方法。
该方法就是利用锚点的方式来返回顶部。即给最顶部的div设置一个id，然后a标签的链接地址写成该id，当点击时就会返回顶部，但是缺点为过于突兀，因为是立即返回顶部。来看一下代码吧：
<body>
<div id="top"></div>
<a href="#top">返回顶部</a>
</body>上面代码当滚动条滚动到一定位置后出现该a标签，且该a标签的position值为fixed，始终固定为浏览器的某一特定位置。点击a标签即会返回到顶部div所在位置
再来看第二种方式
第二种方式相对来说比较人性化，看起来也比较舒服，直接先来看代码吧
<body>
<div>落帆亭博客专注web前端开发</div>
<a class="top-link" href="#">返回顶部</a>
<script>
$(".top-link").click(function(){
$('body,html').animate({scrollTop:0},1000);
return false;
});
</script>
</body>a标签的样式和方式和第一种方式相同，只不过给其添加了一个点击事件，此事件需要进入jquery.js文件，点击之后滚动条会有一个滚动过程，不是一下子回到顶部，个人感觉不错。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2016-08-22，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
