当前位置:Gxlcms > JavaScript > JS采用绝对定位实现回到顶部效果完整实例

JS采用绝对定位实现回到顶部效果完整实例

时间:2021-07-01 10:21:17 帮助过:3人阅读

本文实例讲述了JS采用绝对定位实现回到顶部效果。分享给大家供大家参考,具体如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>绝对定位回到顶部按钮</title>
  7. <style type="text/css">
  8. body{margin:0px;padding:0px;height:2500px;background:#6f0024;}
  9. #div1{width:120px;height:34px;right:4px;bottom:5px;cursor:pointer;background:url(images/ToTop.png) no-repeat;position:fixed;_position:absolute;display:none;}
  10. </style>
  11. <script type="text/javascript">
  12. //绝对定位隐藏显示
  13. function getScroll(id){
  14. var obj = document.getElementById(id);
  15. var timer = null;
  16. positionFixed(obj);
  17. if(obj){
  18. obj.style.display = 'none';
  19. window.onscroll=function(){
  20. getScrollTop() > 0 ? obj.style.display = "block" : obj.style.display = "none";
  21. }
  22. obj.onclick=function(){
  23. var timer = setInterval(sMove,10);
  24. function sMove(){
  25. setScrollTop(getScrollTop() / 1.5);
  26. if(getScrollTop() < 1)clearInterval(timer);
  27. }
  28. }
  29. }
  30. }
  31. //判断IE6
  32. function positionFixed(obj){
  33. var iE6 = !-[1,] && !window.XMLHttpRequest;
  34. if(obj){
  35. var top = obj.offsetTop;
  36. if(iE6){
  37. document.documentElement.style.textOverflow = "ellipsis";
  38. obj.style.position = "absolute";
  39. obj.style.setExpression("top", "eval(documentElement.scrollTop + " + top + ') + "px"');
  40. }
  41. }
  42. }
  43. //获取滚动条Top
  44. function getScrollTop(){
  45. return document.documentElement.scrollTop || document.body.scrollTop;
  46. }
  47. //回到顶部
  48. function setScrollTop(value){
  49. document.documentElement.scrollTop = value;
  50. document.body.scrollTop = value;
  51. }
  52. window.onload = function(){
  53. getScroll('div1');
  54. };
  55. </script>
  56. </head>
  57. <body>
  58. <div id="div1"></div>
  59. </body>
  60. </html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

人气教程排行