[Resolved] Smooth Scroll

[Mike]

Hello,

One of my websites https://gladstonevillagehall.org has an arrow button which when clicked slowly scrolls down the page to an anchor link #Services . I currently have written the following JS to do this,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(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
  });
});
</script>

<script>
$("div.lgc-column:nth-child(1)").click(function() {
  window.location = $(this).find("a").attr("href"); 
  return false;
});
</script>

I however noticed there is a smooth scrolling option in the customiser under the general tab, however I have been unable to get this to work. I have added the “smooth-scroll” class to my anchor link. Have I mis understood the purpose of this setting? My aim is to eliminate my JS code in favour of a GeneratePress setting.

Thanks,
Mike

[Tom]

That should be all that is required.

1. Turn on the smooth scroll option in the Customizer.
2. Add the smooth-scroll class to your links.

You’ll want to make sure your current smooth scroll javascript is deactivated completely.

[Mike]

Hello,

I managed to get it working! Transpires I had accidentally also put the smooth-scroll class in the img tag class aswell!

Thanks,
Mike

[Tom]

Glad you got it working! 🙂

[Author]

Posts