How can I use scroll function in order to move to a particular section?

I just added the code from this site on my own WordPress site. Now I noticed that the code makes it add an automatic height on the section where I target so that it can always be full height.

The js looks like this:

(function() {
  var delay = false;
    $('<a name="#A1">Tag #1.</a>,.home').insertBefore('.eluid6ccc1f08');
  $(document).on('mousewheel DOMMouseScroll', function(event) {
    event.preventDefault();
    if(delay) return;

    delay = true;
    setTimeout(function(){delay = false},200)

    var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

    var a= document.getElementsByTagName('a');
    if(wd < 0) {
      for(var i = 0 ; i < a.length ; i++) {
        var t = a[i].getClientRects()[0].top;
        if(t >= 40) break;
      }
    }
    else {
      for(var i = a.length-1 ; i >= 0 ; i--) {
        var t = a[i].getClientRects()[0].top;
        if(t < -20) break;
      }
    }
    $('html,body').animate({
      scrollTop: a[i].offsetTop
    });
  });
})();

How can I go to a particular section as soon as I scroll down or up without having to add automatic heights?

A good option for that could be anchor tags as you can see in my pen here but unfortunately I do not have access to the html of the site to physical add the anchor tags.

Hope I made some sense.

Read more here: How can I use scroll function in order to move to a particular section?

Leave a Reply

Your email address will not be published. Required fields are marked *