Jquery Smooth Scroll to an Anchor

Smooth scrolling when clicking an anchor link

No need any js just use scroll-behavior: smooth at html tag Thats it

html{
scroll-behavior: smooth;
}

jquery smooth scroll to an anchor?

Here is how I do it:

    var hashTagActive = "";
    $(".scroll").on("click touchstart" , function (event) {
        if(hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll.
            event.preventDefault();
            //calculate destination place
            var dest = 0;
            if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
                dest = $(document).height() - $(window).height();
            } else {
                dest = $(this.hash).offset().top;
            }
            //go to destination
            $('html,body').animate({
                scrollTop: dest
            }, 2000, 'swing');
            hashTagActive = this.hash;
        }
    });

Then you just need to create your anchor like this:

<a class="scroll" href="#destination1">Destination 1</a>

You can see it on my website.

A demo is also available here: http://jsfiddle.net/YtJcL/

jQuery Smooth Scrolling to anchor on different page

The following sample code provides the desired functionality:

$(document).ready(function () {
    var urlHash = window.location.href.split("#")[1];
    if (urlHash &&  $('#' + urlHash).length )
          $('html,body').animate({
              scrollTop: $('#' + urlHash).offset().top - 60
          }, 2500);
});

Please note that if the URL was already visited, the browser will automatically jump to the hash without displaying the animation, then to reproduce the behavior we would need to clear the cache, then a workaround could be implementing a clearing cache function if we intended to display the animation again.

jQuery Smooth Scroll to Top AND to Anchor by 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);
}

Is there a way to disable jQuery scroll animation for some html anchors?

just add a new class to a tags, for which you want to be disabled:

<a class="noscroll"  href="# ...

and change that to:

 $('a[href^="#"]').not(".noscroll").on(...

---

Related Topics