How to use the scroll function to jump to a specific section?

Question

I just added the code from this site to my own WordPress site. Now I noticed that the code adds automatic height to the section where I am aiming so that it can always be complete.

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 specific section as soon as I scroll down or up without adding automatic heights?

A good option for this would be tag binding, as you can see in my pen here , but unfortunately I do not have access to the html site to physically add anchor tags.

Hope I made some sense.

Answer 1

If you can use external resources, I created the jQuery pageScroller plugin a while ago, which allows your autoscrolling between child containers.

If you cannot, you can add your anchors yourself in Javascript. Just select your item and add an ID to it. Then you can use it as an anchor.