锚点缓动

最新推荐文章于 2023-04-24 11:03:25 发布

原创最新推荐文章于 2023-04-24 11:03:25 发布 · 506 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#页面效果

前端效果专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用jQuery实现页面锚点功能，并结合缓动效果，为用户提供平滑的页面滚动体验。通过HTML布局和jQuery代码，可以轻松创建锚点链接，当点击时，页面将缓缓滚动到相应的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面实现锚点，缓动滚动页面

html 布局


<a class="anchor-B2C" href="javascript:;"></a>

 <!-- 跳转部分 -->
 <h3 id="anchor-B2C"></h3>

用 jquery 实现

// 锚点缓动动画
$( function () {
    var b = ( window.opera ) ? ( document.compatMode === 'CSS1Compat' ? $( 'html' ) : $( 'body' ) ) : $( 'html,body' )
    $( '.anchor-B2C' ).click( function () {
        top( '#anchor-B2C' )
    } )

    function top ( a ) {
        b.animate( {scrollTop: $( a ).offset().top - 80}, 1000 )
        return false
    }
} )