js实现点击按钮 页面平滑回至顶部/底部

一、html代码

<div id="backUp" style="z-index: 9999; position: fixed ! important; right: 5px; bottom: 70px;">
     <img src="../../Content/img/top.png" />
</div>
<div id="backDown" style="z-index: 9999; position: fixed ! important; right: 5px; bottom: 30px;">
     <img style="transform:rotate(180deg);" src="../../Content/img/top.png" />
</div>

二、js代码

//回顶部
$('#backUp').click(function () { $('html,body').animate({ scrollTop: '0px' }, 2000); return false; });
//回底部（网页最末端）
$('#backDown').click(function () { $('html,body').animate({ scrollTop: document.getElementsByTagName('BODY')[0].scrollHeight}, 2000); return false; });

    我是在div中添加图片，添加点击事件，图片的路径根据实际情况更改。js代码中2000毫秒为执行此事件过程时间，大概2秒左右，我感觉比较舒服。上下箭头我使用的是同一张图片，通过旋转180度来实现上下箭头。特此安利一波阿里云图标库，应有尽有！

top.png（嫌麻烦可以直接下载）