jQuery Smooth Scroll to Top И для привязки по 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 
    ); 
}); 

}); 

• Как бы это быть изменено также позволяет плавную прокрутку к якорям на странице, используя идентификатор (например, <h2 id="anchor-name">), без конфликтов?

ПРОЯСНИТЬ: Нам нужны либо модификации вышеприведенного сценария, или полный новый, который не будет конфликтовать с ним, что добавит плавную прокрутку к любой ссылке якоря, найденной в существующей HTML страницы (например, , <a href="#any-anchor-link">). 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); 
}