3顶

用 Javascript 实现锚点(Anchor)间平滑跳转

稿源：互联网 2022-04-02 21:40:12 点击： 5883 撤稿纠错

通过点击页面上的链接，设定的内容块就会滑出来，比如当前内容是A块，E块在A块的下、下、左、下的位置...

以下讨论的是和锚点相关的用 Javascript 实现锚点(Anchor)间平滑跳转教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>用 Javascript 实现锚点(Anchor)间平滑跳转</title>
    <script language="javascript">
    // 说明 ：用 Javascript 实现锚点(Anchor)间平滑跳转 
    // 转换为数字
    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>
    <style type="text/css">
    div.test
    {    
    width:400px;     margin:5px auto;     border:1px solid #ccc;
    }
    div.test strong
    {     font-size:16px;     background:#fff;     border-bottom:1px solid #aaa;     margin:0;     display:block;     padding:5px 0;     text-decoration:underline;     color:#059B9A;     cursor:pointer; } div.test p {     height:400px;     background:#f1f1f1;     margin:0;
    }
     </style>
</head>
<body>
    <form id="form1" runat="server">
    <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> 
   
    <div class="test">    
    <a name="header_3" id="header_3"></a>    
    <strong onclick="javascript:scroller('header_6', 800);">header_3 --> header_6</strong><p></p>
    </div> 
   
    <div class="test">    
    <a name="header_4" id="header_4"></a>    
    <strong onclick="javascript:scroller('header_7', 800);">header_4 --> header_7</strong><p></p>
    </div> 
   
    <div class="test">    
    <a name="header_5" id="header_5"></a>    
    <strong onclick="javascript:scroller('header_3', 800);">header_5 --> header_3</strong><p></p>
    </div> 
   
    <div class="test">    
    <a name="header_6" id="header_6"></a>    
    <strong onclick="javascript:scroller('header_2', 800);">header_6 --> header_2</strong><p></p>
    </div> 
   
    <div class="test">    
    <a name="header_7" id="header_7"></a>    
    <strong onclick="javascript:scroller('header_1', 800);">header_7 --> header_1</strong><p></p>
    </div>
    </form>
</body>
</html>

关于用 Javascript 实现锚点(Anchor)间平滑跳转的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011032969131.shtml方便下次再访问哦。

·上一篇： 一个左右联动,国家地区选择的表单特效
·下一篇： 仿土豆网右下角悬浮导航窗口特效

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

用 Javascript 实现锚点(Anchor)间平滑跳转

文章分类LIST >>返回首页

最新游戏

最新新闻