[关闭]
@EncyKe 2016-01-21T07:31:21.000000Z 字数 2052 阅读 5599

JS:回到顶部

前端 JavaScript



一、JS方法

HTML部分

  1. <a href="javascript:;" id="btn" title="回到顶部"></a>

CSS部分

  1. #btn {
  2. width:40px;
  3. height:40px;
  4. position:fixed;
  5. right:65px;
  6. bottom:10px;
  7. display:none;
  8. background:url(images/top_bg.png) no-repeat left top;
  9. }
  10. #btn:hover {
  11. background:url(images/top_bg.png) no-repeat 0 -39px;
  12. }
  13. .bg {
  14. width:1190px;
  15. margin:0 auto;
  16. }

JS部分

  1. window.onload = function(){
  2. var btn = document.getElementById('btn');
  3. // 获取视界高度;
  4. var winH = document.documentElement.clientHeight;
  5. // 定义计时器;
  6. var timer = null;
  7. // 定义是否抵达顶部布尔值判断;
  8. var isTop = true;
  9. // 设置滚动事件;
  10. window.onscroll = function(){
  11. var toTop = document.body.scrollTop || document.documentElement.scrollTop;
  12. // 判断是否到了第二屏,若是,显示按钮;
  13. if (toTop >= winH) {
  14. btn.style.display = 'block';
  15. }else{
  16. btn.style.display = 'none';
  17. };
  18. // 判断是否抵达顶部,若否,停止计时器;
  19. if (!isTop) {
  20. clearInterval(timer);
  21. };
  22. // 重置布尔值判断;
  23. isTop = false;
  24. }
  25. // 设置按钮单击事件;
  26. btn.onclick = function(){
  27. // 设置计时器,50毫秒间隔;
  28. timer = setInterval(function(){
  29. var toTop = document.body.scrollTop || document.documentElement.scrollTop;
  30. // 设置速度,用等式而不用具体数值是为了产生缓动效果;
  31. var speed = Math.ceil(toTop/5);
  32. // 作差,产生缓动效果;
  33. document.documentElement.scrollTop = document.body.scrollTop = toTop - speed;
  34. // 重置布尔值判断;
  35. isTop = true;
  36. // 判断是否抵达顶部,若是,停止计时器;
  37. if (toTop == 0) {
  38. clearInterval(timer);
  39. };
  40. },50);
  41. }
  42. }

二、jQuery方法

JS部分

  1. $(function() {
  2. var btn = document.getElementById('goTop');
  3. var isTop = true;
  4. $(window).scroll(function(){
  5. var scrollTop = $(window).scrollTop();
  6. var scrollHeight = $(document).height();
  7. var footerHeight = $('footer').height();
  8. var windowHeight = $(window).height();
  9. if (scrollTop > 0 && scrollTop < scrollHeight - windowHeight - footerHeight) {
  10. btn.style.display = 'block';
  11. btn.style.position = 'fixed';
  12. btn.style.top = 'auto';
  13. btn.style.bottom = '70px';
  14. }else if(scrollTop + windowHeight + footerHeight >= scrollHeight){
  15. btn.style.display = 'block';
  16. btn.style.position = 'absolute';
  17. btn.style.bottom = 'auto';
  18. btn.style.top = parseInt( scrollHeight - 70 - footerHeight ) + 'px';
  19. }else{
  20. btn.style.display = 'none';
  21. };
  22. isTop = false;
  23. });
  24. btn.onclick = function(){
  25. if (!isTop) {
  26. goTop(400);
  27. isTop = true;
  28. };
  29. function goTop(speed){
  30. $('body').animate({scrollTop:'0'},speed,'swing');
  31. }
  32. }
  33. });

附:参考

慕课:回到顶部效果
Demo下载

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注