记页面效果之“返回顶部”和“跳转到页面指定位置”的实现

在pc端的页面中当页面内容比较多，长度比较长就会出现竖向滚动条，这时候用户往下拉动滚动条浏览页面到底部后，再次返回到页面的顶部去浏览前面的内容就要往下一直拉动滚动条，用户体验很不好。许多页面都会在页面右侧放置一个固定的回到顶部的按钮之类的，当滚动条拖到到一定的高度就会出现。然后用户从底部回到顶部就很方便直接点击回到顶部即可。

实现方式有几种，这边试过2种：

1：利用a标签的锚点跳转的属性可以实现在同一页面的不同元素（即内容区）的跳转；

也就是将a链接的href属性的指向等于其要跳转到的内容区的id

<a href="#intro">介绍</a>

<div id='info' style='background-color:red;'>

<h3>这是内容</h3>

这里的文字很多

这里的文字很多

这里的文字很多

这里的文字很多这里的文字很多

这里的文字很多

这里的文字很多

这里的文字很多

这里的文字很多

这里的文字很多

</div>

2.第二种方式就是监听body或html或外容器的onscroll事件，根据滚动条滚动的距离来动态显示或隐藏返回顶部的按钮，然后回到顶部其实就是外容器的scrollTop=0即可；这里还是用的jquery

$(function(){
    $('.wrap').scroll(function(){
        if($('.wrap').scrollTop() >500){