`

js实现平滑跳转到锚点(Anchor)

阅读更多
<SCRIPT type=text/javascript> 

// 说明 :用 Javascript 实现锚点(Anchor)间平滑跳转 
// 来源 :ThickBox 2.1 
// 整理 :Yanfu Xie [xieyanfu@yahoo.com.cn] 
// 网址 :http://www.codebit.cn 
// 日期 :07.01.17 

// 转换为数字 
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> 



调用方式:
scroller(el, duration) 

el:目标锚点 ID 
duration:持续时间,以毫秒为单位,越小越快
分享到:
评论

相关推荐

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

    用 Javascript 实现锚点(Anchor)间平滑跳转 - 平滑, 锚点, Anchor, 跳转, 滚动。

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

    JavaScript实现锚点间的平滑跳转是一种增强用户体验的技术,它避免了传统锚点直接跳转带来的瞬间移动感,使得页面过渡更加流畅。在网页设计中,锚点常用于长页面内容的分段,用户可以通过点击不同的链接直接到达页面...

    锚点平滑滚动

    锚点平滑滚动是一种网页设计技术,主要用于提升用户体验,使得用户点击链接后,页面能够平滑地滚动到目标位置,而不是瞬间跳转。这一技术在现代网页开发中广泛应用,尤其在内容丰富的长页面中,如产品介绍、文章...

    浅谈vue 锚点指令v-anchor的使用

    通过以上代码,可以实现一个平滑滚动的效果,用户点击绑定有`v-anchor`指令的元素时,浏览器会将视窗滚动到指定的锚点位置。这里使用了递归函数`smoothDown`和`smoothUp`实现平滑滚动。 此外,为了达到平滑滚动的...

    线程导航+锚点跳转,点击锚点跳转到对应位置

    在网页开发中,"线程导航+锚点跳转"是一种常见的交互设计,它结合了JavaScript(js)技术,使得用户可以通过点击特定的链接(锚点)快速定位到页面的指定部分。这种功能极大地提升了用户体验,特别是在内容丰富的长...

    jquery锚点带动画跳转

    jQuery 是一个广泛使用的JavaScript库,它提供了丰富的功能和简便的API,可以用来增强HTML和CSS的功能,包括实现锚点跳转的动画效果。本文将深入探讨如何使用jQuery实现锚点带动画跳转,并分享相关的知识点。 一、...

    jQuery 锚点 平滑移动特效

    在网页设计中,锚点链接(Anchor Link)是一种常见的导航方式,它允许用户通过点击链接直接跳转到页面内的特定位置。jQuery 提供了平滑滚动(Smooth Scrolling)的效果,使得这种跳转过程更加优雅,用户体验更佳。...

    实现锚点的带动画效果

    总结,实现锚点的带动画效果,关键在于利用CSS3的过渡和动画,或者借助JavaScript库,结合锚点的特性,为页面滚动创造出平滑、自然的视觉体验。在实际开发中,务必注意兼容性和用户体验的优化。

    js 实现锚平滑定位页面

    在JavaScript中实现锚点平滑定位页面是前端开发中的常见需求,本文将详细介绍这一过程。 首先,我们需要理解HTML锚点的基本原理。在HTML中,我们可以通过设置`&lt;a&gt;`标签的`href`属性为`#target`来创建一个锚点链接,...

    jQuery实现平滑滚动到指定锚点的方法

    来阻止链接的默认行为,即防止页面在动画执行后跳转到锚点位置导致动画效果被立即终止。 通过这个示例,我们可以理解到如何使用jQuery来实现一个实用的、平滑滚动到页面任意位置的效果,而不仅仅局限于页面顶部。这...

    JS 锚点

    例如,许多网站的侧边栏导航菜单就利用了JavaScript锚点,点击菜单项时,页面会平滑滚动到相应的内容区域。 综上所述,JavaScript锚点提供了HTML锚点所不具备的动态控制和交互体验,是现代网页开发中不可或缺的一...

    javascript实现锚点

    JavaScript 实现锚点是一种常见的网页交互技术,它允许用户点击页面上的链接,快速跳转到同一页面的特定位置。在网页开发中,锚点通常用于长页面的导航,让用户能够轻松地访问页面内的各个部分。这篇文章将深入探讨...

    jquery实现的a标签锚点定位特效源码.zip

    在HTML中,锚点(Anchor)是通过`&lt;a&gt;`标签实现的,通常用于创建页面内的链接,允许用户点击后快速跳转到同一页面的特定位置。一个典型的锚点链接会包含`href`属性,该属性值为`#`加锚点的ID,例如`跳转到section1...

    外卖微信小程序:实现类似锚点功能.rar

    5. **滚动操作**:调用`wx.pageScrollTo` API,传入目标位置的`scrollTop`值,实现页面的平滑滚动到指定位置。例如:`wx.pageScrollTo({ scrollTop: position.top, duration: 300 })`,这里的`duration`参数表示滚动...

    jQuery锚点带动画跳转特效.zip

    《jQuery锚点带动画跳转特效的实现与应用》 jQuery锚点带动画跳转特效是一种常见的网页交互设计,它能够使用户在页面内点击链接时,不仅快速定位到相应内容,还能配合动画效果,提升浏览体验。尤其在购物商城网站、...

    jquery实现滚动与动态锚点

    对于动态锚点的实现,可以结合`.on('click', 'a')`来监听链接点击事件,使用`preventDefault()`防止默认的页面跳转,然后用`animate()`平滑滚动到目标位置: ```javascript $('a').on('click', function(event) { ...

    【JavaScript源代码】vue实现锚点定位功能.docx

    在 Vue 中实现锚点定位功能,可以增强用户体验,使得用户可以通过点击导航栏中的链接直接跳转到页面的特定位置。以下是使用 Vue.js 实现锚点定位的详细步骤和相关知识点: 1. **锚点的基本概念**: 锚点(Anchor)...

    两种页面平滑跳转滚动的解决方案

    在网页设计中,页面平滑跳转滚动是一种常见的交互效果,它使得用户在点击链接时,页面能够平滑地从当前位置滚动到目标位置,而不是瞬间跳转。这种效果不仅提升了用户体验,还使得网站看起来更加专业和现代。下面将...

    锚点快速定位到页面中指定位置

    在网页设计中,锚点(Anchor)是一种非常实用的功能,它允许用户通过点击链接快速跳转到页面内的特定位置。本文将深入探讨锚点的工作原理、如何创建锚点以及其在实际网页开发中的应用。 首先,锚点是HTML中标签的一...

Global site tag (gtag.js) - Google Analytics