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">）平滑滚动到页面上的锚点，而不会发生冲突？

澄清：我们需要对上述脚本进行修改，或者新建一个不会与之冲突的脚本，这将为页面现有 HTML 中的任何锚链接添加平滑滚动（例如，@987654323 @)。 JS 应该检测任何锚链接并为其添加平滑滚动功能。我们不会手动将特定的锚链接添加到 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);
}