返回到顶部

时间 2018/12/23 20:24:11 加载中...

返回到顶部

HTML

  1. <a href="#" id="top" class="go-top"></a>

CSS

  1. .go-top{
  2. position:fixed;
  3. right:0;
  4. bottom:10px;
  5. height: 38px;
  6. width:38px;
  7. background:url(/Images/scrolltop.png);
  8. background-size:100% 100%;
  9. }
  10. .go-top:hover{
  11. background:url(/Images/go-top-hover.jpg);
  12. background-size:100% 100%;
  13. }

JavaScript

  1. $(document).ready(function (e) {
  2. //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
  3. $(function () {
  4. $(window).scroll(function () {
  5. if ($(window).scrollTop() > 100) { //大于100行才出现跳转箭头
  6. $("#top").fadeIn(500); //大于1500行时跳转箭头慢慢透明显示
  7. }
  8. else {
  9. $("#top").fadeOut(500); //大于1500行时跳转箭头慢慢透明消失
  10. }
  11. });
  12. //当点击跳转链接后,回到页面顶部位置
  13. $("#top").click(function () {
  14. $('body,html').animate({ scrollTop: 0 }, 500);//1s完成回到顶部
  15. return false;
  16. });
  17. });
  18. });

素材图片

图片点击右键保存


扫码分享
版权说明
作者:SQBER
文章来源:http://www.sqber.com/articles/rollback-top.html
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。