加入css样式
- #back-top {
- position: fixed;
- bottombottom: 30px;
- margin-left: -150px;
- }
- #back-top a {
- width: 108px;
- display: block;
- text-align: center;
- font: 11px/100% Arial, Helvetica, sans-serif;
- text-transform: uppercase;
- text-decoration: none;
- color: #bbb;
- /* transition */
- -webkit-transition: 1s;
- -moz-transition: 1s;
- transition: 1s;
- }
- #back-top a:hover {
- color: #000;
- }
- /* arrow icon (span tag) */
- #back-top span {
- width: 108px;
- height: 108px;
- display: block;
- margin-bottom: 7px;
- background: #ddd url(up-arrow.png) no-repeat center center;
- /* rounded corners */
- -webkit-border-radius: 15px;
- -moz-border-radius: 15px;
- border-radius: 15px;
- /* transition */
- -webkit-transition: 1s;
- -moz-transition: 1s;
- transition: 1s;
- }
- #back-top a:hover span {
- background-color: #777;
- }
加入js部分
- <script>
- $(document).ready(function(){
- $("#back-top").hide();//首先将返回顶部这个图片隐藏
- // 淡入返回顶部图片
- $(function () {
- $(window).scroll(function () {
- if ($(this).scrollTop() > 100) {
- $('#back-top').fadeIn();//如果鼠标滚动页面的距离顶部大于100像素时以淡入的方式显示返回顶部图片
- } else {
- $('#back-top').fadeOut();//如果小于100像素则隐藏图片
- }
- });
- // 当鼠标点击返回顶部图片时
- $('#back-top a').click(function () {
- $('body,html').animate({
- scrollTop: 0 //返回到距离页面顶部0像素的位置
- }, 800); //以800毫秒的速度向上滚动
- return false;
- });
- });
- });
- </script>
最后一步在body标签内加入id="top",即<body id="top">添加一个锚点,当鼠标点击返回顶部链接时,即之前添加过的
<p id="back-top">
< a href="#top"><span></span>Back to Top</a>
< /p>
就可以顺利返回顶部了