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.
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
);
});
});
- 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?
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.