Javascript ScrollTo Issue-To-Fix » Overflow: Hidden
Recently come across a post on stackoverflow titled “jQuery scrollTop() method not working”.
One of the many great things about Stack Overflow is the community covers all skill levels – all over the board – with plenty of folks more than willing to offer up suggestions. Since there are multiple ways to do almost anything in coding, this is a great thing.
I typically read through the given answers and see if something has been missed or not considered and try to expand upon it or at least offer some troubleshooting consideration – especially when I see language barriers. So I try to break it down, like so many people have done for me over the years. Here’s where this landed:
A common scrollTo issue is having overflow set on the "html, body" element in css. Rarely mentioned as a gotcha when having scrolling/animating issues on html/body elements and can end up in excessive over-engineering.
If overflow needs to be set, put it on the body element only » Not both html,body.
It is also a good habit to use a data-* attribute in place of classes or IDs in your html. This gets you in the habit of separating styles from code. Consider this to make your life easier in the future:
**Create Reusable Scroll Function**
scrollioreceiver = function(sender) {
$(sender).on({ click: sentFrom });
function sentFrom(){ var dataMine = $(this).attr('data-sender'), dataSend = $('[data-receiver="'+dataMine+'"]');
$('html, body').animate({ scrollTop: $(dataSend).offset().top - 70 }, 800, function() { // if you need a callback function }); } }
Create data attributes to html elements (data-name is arbitrary and should make sense):
**ADD HTML LINK**
<a data-sender="ScrollToMatch">Link To Click To Scroll To Match Attribute</a>
**ADD HTML ELEMENT**
<div data-receiver="ScrollToMatch">Scrolls To This Element</div>
**VERIFY CSS** » overflow added to "html,body" won't work
body { overflow-x: hidden; }
**INIT FUNCTION ON READY** » initialize on doc ready with attribute name selector to create flexibility on multiple calls
scrollioreceiver('[data-sender]');
http://stackoverflow.com/a/38063761/2903963