jQuery 按 ID 平滑滚动到顶部和锚点

Question

我正在寻找添加 jQuery 滚动到顶部或滚动到锚点的答案，但实际上两者并没有集成。所以希望可以在这里提问。

我们当前有 jQuery 功能，可以为较长的页面添加滚动到顶部的锚点。它工作正常。

// Add To Top Button functionality
jQuery(document).ready(function($){

    // Scroll (in pixels) after which the "To Top" link is shown
    var offset = 700,
    //Scroll (in pixels) after which the "back to top" link opacity is reduced
    offset_opacity = 1200,
    //Duration of the top scrolling animation (in ms)
    scroll_top_duration = 700,
    //Get the "To Top" link
    $back_to_top = $('.to-top');

//Visible or not "To Top" link
    $(window).scroll(function(){
    ( $(this).scrollTop() > offset ) ? $back_to_top.addClass('top-is-visible') : $back_to_top.removeClass('top-is-visible top-fade-out');
    if( $(this).scrollTop() > offset_opacity ) { 
        $back_to_top.addClass('top-fade-out');
    }
});

//Smoothy scroll to top
$back_to_top.on('click', function(event){
    event.preventDefault();
    $('body,html').animate({
        scrollTop: 0 ,
        }, scroll_top_duration
    );
});

});

如何修改它以允许平滑滚动到页面上的锚点，使用 ID（例如，<h2 id="anchor-name">），而不会发生冲突？

澄清一下：我们需要对上述脚本进行修改，或者一个不会与之冲突的全新脚本，这将为在现有 [=24] 中找到的任何锚点 link 添加平滑滚动=] 的页面（例如，<a href="#any-anchor-link">）。 JS 应该检测任何锚 links 并向其添加平滑滚动功能。我们不会手动添加特定的锚 links 到 JS。

Answer 1

将滚动逻辑提取到它自己的函数中，该函数接受元素的 id 作为参数。

//Smoothy scroll to top
$back_to_top.on('click', function(event) {
    event.preventDefault();
    targetedScroll();
});

// example of smooth scroll to h2#anchor-name
$('#some-button').on('click', function(event) {
    event.preventDefault();
    targetedScroll('anchor-name');
});

// bind smooth scroll to any anchor on the page
$('a[href^="#"]').on('click', function(event) {
    event.preventDefault();
    targetedScroll($(this).attr('href').substr(1));
});

// scrolling function
function targetedScroll(id) {
    // scrollTop is either the top offset of the element whose id is passed, or 0
    var scrollTop = id ? $('#' + id).offset().top : 0;

    $('body,html').animate({
        scrollTop: scrollTop,
    }, scroll_top_duration);
}

jQuery 按 ID 平滑滚动到顶部和锚点

jQuery Smooth Scroll to Top AND to Anchor by ID

javascript

jquery

smooth-scrolling