jQuery实现的返回顶部代码(一)

此代码仅供参考

---

代码说明

使用jQuery实现的效果是：当页面初次载入，浏览器滚动条处于最顶部的时候，跳转链接处于隐藏状态。当滚动条向下滚动后，跳转链接逐渐显出，当点击跳转链接后，页面逐渐滚动至顶部，跳转链接逐渐消失。

---

html代码

<style type="text/css"> .backtotop{width:40px;height:32px;position:fixed;bottom:80px;right:20px;display:none;z-index:5;background-image:url(http://www.sonymobile.com/cn/wp-content/themes/semc-main/img/sprite-icons-7bce0ee69041b1fe6c72a6ba822cbe44.png);background-position:-388px 7px;background-repeat:no-repeat;background-attachment:scroll;background-color:transparent;-moz-transition:background-color .3s ease-out;-o-transition:background-color .3s ease-out;-webkit-transition:background-color .3s ease-out;transition:background-color .3s ease-out;background-color:rgba(33,37,48,0.4);border-radius:2px;} @media only screen and (-webkit-min-device-pixel-ratio:1.3),only screen and (-o-min-device-pixel-ratio:13 / 10),only screen and (min-resolution:120dpi){.backtotop{background-size:1503px 340px;background-image:url(http://www.sonymobile.com/cn/wp-content/themes/semc-main/img/retina-sprite-icons-815d62cec606c3e653adfc20692265e6.png);background-position:-388px 7px;background-repeat:no-repeat;background-attachment:scroll;background-color:transparent;background-color:rgba(33,37,48,0.4);} } @media(max-width:768px){.backtotop{right:20px;bottom:100px;} } .backtotop:hover{background-color:#4d5059;cursor:pointer;} .rtl .backtotop{left:20px;right:auto;} .ie8 .backtotop{background-color:#4d5059;} </style> <div data-module="backtotop" data-id="backtotop" class="backtotop"> <a href="#"></a> </div> <script type="text/javascript">window.iQ = {options: { speedTestExpireMinutes: 30, asyncDistance: screen.height, throttleSpeed: 300, updateOnResize: true, speedTestUri: '//tulip.se-mc.com/assets/images/speedtest.jpg'}};</script><script src="//tulip.se-mc.com/javascripts/analyticsWithJquery.bcce0f706e54a557.js" type="text/javascript"></script><script src="//tulip.se-mc.com/javascripts/sonymobile.5f7ee5fcccc6a396.js" type="text/javascript"></script><script src="//tulip.se-mc.com/javascripts/page/product_details.d1ab8b4f39b80292.js" type="text/javascript"></script><script src='http://www.sonymobile.com/wp-content/themes/semc-main/js/mf.min-dc620d378180594b3915643e03b981cf.js' type='text/javascript'></script>

---

代码演示

---

---