<script type="text/javascript"> function intval(v){ v = parseInt(v); return isNaN(v) ? 0 : v; } // ?取元素信息 function getPos(e){ var l = 0; var t = 0; var w = intval(e.style.width); var h = intval(e.style.height); var wb = e.offsetWidth; var hb = e.offsetHeight; while (e.offsetParent) { l += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0); t += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0); e = e.offsetParent; } l += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0); t += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0); return { x: l, y: t, w: w, h: h, wb: wb, hb: hb }; } // ?取??条信息 function getScroll(){ var t, l, w, h; if (document.documentElement && document.documentElement.scrollTop) { t = document.documentElement.scrollTop; l = document.documentElement.scrollLeft; w = document.documentElement.scrollWidth; h = document.documentElement.scrollHeight; } else if (document.body) { t = document.body.scrollTop; l = document.body.scrollLeft; w = document.body.scrollWidth; h = document.body.scrollHeight; } return { t: t, l: l, w: w, h: h }; } // ?点(Anchor)?平滑跳? function scroller(el, duration){ if (typeof el != ‘object‘) { el = document.getElementById(el); } if (!el) return; var z = this; z.el = el; z.p = getPos(el); z.s = getScroll(); z.clear = function(){ window.clearInterval(z.timer); z.timer = null }; z.t = (new Date).getTime(); z.step = function(){ var t = (new Date).getTime(); var p = (t - z.t) / duration; if (t >= duration + z.t) { z.clear(); window.setTimeout(function(){ z.scroll(z.p.y, z.p.x) }, 13); } else { st = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.y - z.s.t) + z.s.t; sl = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.x - z.s.l) + z.s.l; z.scroll(st, sl); } }; z.scroll = function(t, l){ window.scrollTo(l, t) }; z.timer = window.setInterval(function(){ z.step(); }, 13); } </script>
<div class="test"> <a name="header_1" id="header_1"></a> <strong onclick="javascript:scroller(‘header_4‘, 800);">header_1 --> header_4</strong> <p> </p> </div> <div class="test"> <a name="header_2" id="header_2"></a> <strong onclick="javascript:scroller(‘header_5‘, 800);">header_2 --> header_5</strong> <p> </p> </div>
另外一种方式是使用jquery比较简单一些!
我们知道html有锚点定位的效果,那么如何实现平滑的定位效果呢?下面由68ecshop的技术来为您详细解答 <script type="text/javascript" src="http://code.hs-cn.com/jquery/jquery-1.7.1.min.js"></script> <div id="top" class="append_box mb20"> 平滑跳转到底部:<a href="#bottom" class="smooth">滑到底部</a> </div> <div id="appendBox" class="append_box"> <img width="950" height="931" src="http://www.dubai.com/images/upload/Image/201407210943470ffuoj.jpg" /><br /> <img width="950" height="1000" src="http://www.dubai.com/images/upload/Image/20140721094432t9j0kt.jpg" /> </div> <div id="bottom" class="append_box mb20"> 平滑回到顶部:<a href="#top" class="smooth">回到顶部链接</a> </div>
<script> $(".smooth").click(function(){ var href = $(this).attr("href"); var pos = $(href).offset().top; $("html,body").animate({scrollTop: pos}, 1000); return false; }); </script> //技术解答: //class="smooth":我们自己定义的一个class名称,目的是js调用该标签 //href="#top":top是要定位的标签ID名称 //$("html,body").animate({scrollTop: pos}, 1000):1000 是滑动的时间,我们可以自己调整
时间: 2024-10-14 23:49:02