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

2019-11-20 09:39:21

字体：大中小

来源：转载

供稿：网友

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>绝对定位回到顶部按钮</title><style type="text/css">body{margin:0px;padding:0px;height:2500px;background:#6f0024;}#div1{width:120px;height:34px;right:4px;bottom:5px;cursor:pointer;background:url(images/ToTop.png) no-repeat;position:fixed;_position:absolute;display:none;}</style><script type="text/javascript">//绝对定位隐藏显示function getScroll(id){ var obj = document.getElementById(id); var timer = null; positionFixed(obj); if(obj){ obj.style.display = 'none'; window.onscroll=function(){  getScrollTop() > 0 ? obj.style.display = "block" : obj.style.display = "none"; } obj.onclick=function(){  var timer = setInterval(sMove,10);  function sMove(){  setScrollTop(getScrollTop() / 1.5);  if(getScrollTop() < 1)clearInterval(timer);  } } }}//判断IE6function positionFixed(obj){ var iE6 = !-[1,] && !window.XMLHttpRequest; if(obj){     var top = obj.offsetTop; if(iE6){  document.documentElement.style.textOverflow = "ellipsis";  obj.style.position = "absolute";  obj.style.setExpression("top", "eval(documentElement.scrollTop + " + top + ') + "px"'); } }}//获取滚动条Topfunction getScrollTop(){ return document.documentElement.scrollTop || document.body.scrollTop;}//回到顶部function setScrollTop(value){ document.documentElement.scrollTop = value; document.body.scrollTop = value;}window.onload = function(){ getScroll('div1');};</script></head><body><div id="div1"></div></body></html>

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

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

上一篇：BootStrap selectpicker

下一篇：基于Turn.js 实现翻书效果实例解析