JQuery smooth scroll - can this be simplified?-CodePudding

I have some very long pages. In the footer I have an anchor link taking the user back to the header. I would like to be able to use the following CSS (but it does not work in Safari) to make the scroll smooth (slow it down).

html {
  scroll-behavior: smooth;
}

So I have found some JQuery. I don't understand JQuery and have some questions.

  $(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
    });
  });

Is it possible to make this simpler?

2.I'm not sure I need to add the #top to the URL? All I want the page to do is go back to the top (I'm not using anchor links to navigate to bits of content). But I don't know how to remove this code without breaking the whole thing. I've tried and I don't know what to delete and what to keep.

What does this mean "Make sure this.hash has a value". I've ignored it and it seems to work ok.

UPDATE

This is my HTML (obviously with a lot of content between the header and footer)

<header id="top">.... </header>

<footer>
<a href="#top"><img  src="resources/arrow.svg"></a>
</footer>

CodePudding user response：

If you are using JQuery only for this feature, use scrollIntoView from JavaScript.

With JQuery, this function is enough:

function elevator(where) {
    var the_id = "#"   where;
    $('html, body').animate({
        scrollTop:$(the_id).offset().top
    }, 'slow');
    return false;
}

which you can use in html tags like this:

<h1 id="title">Title at the top of the page</h1>
<!-- a lot of space -->
<button onclick="elevator('title')">go up</button>

NOTE: The CSS property is not useful with this function.

Now if you want an explanation of your code:

 $(document).ready(function(){
    // Add smooth scrolling to all links
    // i.e. select all links on your page and add en event for each of them
    // event called when there is a click
    $("a").on('click', function(event) {

      // Make sure this.hash has a value before overriding default behavior
      // the hash is the anchor. For example: "website.com/page.html#hash"
      // we must check if there is an hash in the link
      if (this.hash !== "") {
        // Prevent default anchor click behavior
        // i.e. the default behavior of a link
        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
    });
  });

Your code is creating the smooth effect for every link automatically.