jQuery平滑滚动到顶部并按ID锚定 [英] jQuery Smooth Scroll to Top AND to Anchor by ID

问题描述

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

I'm finding answers for adding jQuery scroll to top OR scroll to anchors, but not really both integrated. So hope it's OK to ask here.

我们具有当前的jQuery函数，可为更长的页面添加滚动到顶部的锚点.效果很好.

We have current jQuery function to add a scroll-to-top anchor for longer pages. It works fine.

// 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">)平滑滚动到页面上的锚点，又不会发生冲突?
• How would this be modified to also allow smooth scrolling to anchors on page, using an ID (e.g, <h2 id="anchor-name">), without conflicts?

澄清:我们需要对上述脚本进行修改，或者需要一个与之不冲突的全新脚本，这将为页面的现有HTML中找到的任何锚链接添加平滑的滚动(例如，). JS应该检测到任何锚链接，并向其中添加平滑滚动功能.我们不会手动将特定的锚链接添加到JS.

TO CLARIFY: We need either a modification to the above script, or a complete new one that will not conflict with it, that will add smooth scrolling to any anchor link found in the existing HTML of a page (e.g., <a href="#any-anchor-link">). The JS should detect any anchor links and add the smooth scrolling functionality to it. We would not manually add specific anchor links to the JS.

推荐答案

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

Extracted the scrolling logic into its own function, which accepts an element's id as an argument.

//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锚定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！