0
 $(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
      }, 1000, function(){

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

I'm running this to smooth scroll to "#top" without changing the url-hash. I accidentally discovered a way to modify this so that the URL won't update (added "none" for the "window.location.hash"), but there's one problem; Now the function won't repeat.

Here's what happens:

  • Load page
  • Scroll down
  • Press top anchor
  • Page scrolls to top (without updating url)
  • Scroll down again
  • Press top anchor
  • Nothing happens

Don't know where I got this snippet, but I've had it in my js-folder for a while.

QAW
  • 295
  • 2
  • 3
  • 9
  • 1
    `window.location.hash = none;` - if you look in your browser console, you're getting "`none` is not defined." If you want to keep the URL from having an empty hash if you click on a `top` link, add `id="top"` to `body` or your first/top element or whatever, and change that link to `top` – Michael Coker May 27 '17 at 17:37

2 Answers2

2

You're mixing two ways to scroll the page.

hash is the #something in the URL... Usefull to scroll to an anchor on page load.

See the #hello effect in this link: https://codepen.io/Bes7weB/pen/ybWNbJ?editors=1111#hello

Then, for the user to scroll to the top of the page, I would use the id of the top anchor in the href of the link which triggers the scroll function.
This would trigger the function on this specific link instead of ALL links in the page. ;)

And finally, this line: window.location.hash = none; is trying to chang the original onload hash value to none which is interpreted as an undefined variable since this is expecting a string.

ReferenceError: none is not defined

I would simply remove that line...
or if you really want to clear the hash value:

window.location.hash = "";


Working scroll top function: See codePen for the HTML markup changed)

 $(document).ready(function(){
  // Add smooth scrolling to all links
  $("a#backTOtop").on('click', function(event) {
    console.log($(this).attr("href"));

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

      // Store hash
      var top = $(this).attr("href");

      // 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: $(top).offset().top
      }, 1000, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        // window.location.hash = none;
      });
    } // End if
  });
});
Louys Patrice Bessette
  • 33,375
  • 6
  • 36
  • 64
0

If you not need to affect the url hash, just remove (or comment with //) that line of code; because it generate error in javascript.

If you want to remove the hash from url, try this code:

history.pushState('', document.title, window.location.pathname + window.location.search);
CoursesWeb
  • 4,179
  • 3
  • 21
  • 27