How to smooth scroll to an id after clicking a link from another page

Question

Say that I have a link in a page,

<a href="https://example.com/#sample"><p>Click Me</a>

Clicking on the click gets you to the link in the href attribute. But because of how the gods work, it snaps immediately to the id in that page.

What I want to happen is that the page should not immediately go to the id, but start at the top of the page, and then smooth scroll to the id.

On a side note, the sticky menu is in the way, when it snaps to the id, its overlapped by the menu (one of the main reasons i want it to scroll instead).

jQuery isn't my strong suit.

Thank you to anyone who can help.

EDIT I don't think I worded this properly. The link with the a tag is on a different page than its target. For example:

The Homepage has the link

<a href="https://example.com/anotherPage/#sample"><p>Click Me</a>

There's a page called anotherPage that I would like scrolling to work on.

Sorry for not making this not detailed enough.

Thanks to anyone who replies.

css transition would help – Aakash Martand Aug 17 '17 at 07:18 — Aakash Martand, Aug 17 '17 at 07:18

Jeffrey Roosendaal · Accepted Answer · 2017-08-18T07:27:21.077

It's easy, and only a few lines, with jQuery.

When using $('a[href*=\\#]'), it only/automatically applies to all anchors (<a>) with a hash (#).

$(document).ready(function() {
    $('a[href*=\\#]').on('click', function(e){
        e.preventDefault();
        $('html, body').animate({
            scrollTop : $(this.hash).offset().top
        }, 500);
    });
});

Update

In case you want to smooth scroll to an element on a new page, include the following code on that page:

$(document).ready(function() {
    if (window.location.hash) {
        var hash = window.location.hash;
        $('html, body').animate({
            scrollTop :  $(hash).offset().top
        }, 500);
    };
});

It checks if there's a hash in the URL, and if so, it smooth scrolls to the element with the corresponding id.

Note 1: you can alter the speed by changing the 500 param. It is the animation time in ms.

Note 2: You can also add another param after 500, which is the easing type. By default it's swing (similar to CSS's ease-in-out) but you can change it to linear.

Any chance you can see my edit above? Thanks. – ace_01S Aug 18 '17 at 01:47 — ace_01S, Aug 18 '17 at 01:47
I've updated my answer. Hope this helps. – Jeffrey Roosendaal Aug 18 '17 at 07:27 — Jeffrey Roosendaal, Aug 18 '17 at 07:27

score 2 · Answer 2 · answered Aug 17 '17 at 07:21

You can use jQuery's animate function.

See this example on w3 schools: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll

$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});

Any chance you can see my edit above? Thanks. – ace_01S Aug 18 '17 at 01:48 — ace_01S, Aug 18 '17 at 01:48

score 1 · Answer 3 · answered Aug 17 '17 at 07:24

1

I always used this one for external links: This will scroll to the anchors with an id #

$(document).on("ready", function () {
      var urlHash = window.location.href.split("#")[1];
      $('html,body').animate({
          scrollTop: $('.' + urlHash + ', #' + urlHash +',[name='+urlHash+']').first().offset().top -100
      }, 1000);
  });

answered Aug 17 '17 at 07:24

Zowie van Geest

169
6

Any chance you can see my edit above? Thanks. – ace_01S Aug 18 '17 at 01:48
Hello, I am doing anchor link to another page with smooth scrolling with this code. But i have a problem. I have 2 or more anchor area on ONE PAGE. When i came another page there is no problem but when i click my anchor link for another area on SAME PAGE it s not scrolling smooth. why? @zowievangeest – Mar 20 '20 at 07:47

How to smooth scroll to an id after clicking a link from another page

3 Answers3

Update