Automatic page scrolling

Question

Good day! There is a tabbed script. Help, please, make sure that when you click on a tab, the page automatically scrolls up, where the top of the page will be the top point of the tab of the .content block. Thanks for the help!

$(document).ready(function(){ $('.tab').on('click', function() { var $me = $(this); var id = $me.data("id"); $('.content').hide(); $('.content[data-id = ' + id + '-content]').show(); $('.tab.tab-sel').removeClass('tab-sel'); $('.tab[data-id=' + id + ']').addClass('tab-sel'); }); });

This is for yesterday’s question ( ru.stackoverflow.com/questions/505172/… ) I used your script, started doing it, everything is fine, but my page turns out to be too complex and voluminous, and when I go through the tabs it’s not very aesthetically pleasing that looks page jumps.
Therefore, I see a solution so that when you click the page scroll to the top of the tab.
It's just not very clear what your jumps are, because when you switch a tab, the user will scroll to the top and so on to push the tab.
And so - I can prompt that in jQuery var offset = $('<Элемент>').offset().top;
In this case, IMHO makes sense to animate only a click on the lower tabs.

user200141 user200141 682 four sixteen · Accepted Answer · 2016-03-22T09:41:26

Try this

 $(document).ready(function(){ $('.tab').on('click', function() { var $me = $(this); var id = $me.data("id"); var $tab = $('.tab[data-id=' + id + ']'); var $tabBody = $('.content[data-id = ' + id + '-content]'); $('.tab.tab-sel').removeClass('tab-sel'); $tab.addClass('tab-sel'); $('.content').fadeOut(500); $tabBody.fadeIn(500); //Если клик по нижней вкладке(Например класс .bottom) if($me.is('.bottom')) { var offset = $tabBody.offset().top; $("body,html").animate({scrollTop: offset}, 500); } }); });

Without animation, if ugly it turns out

 $(document).ready(function(){ $('.tab').on('click', function() { var $me = $(this); var id = $me.data("id"); var $tab = $('.tab[data-id=' + id + ']'); var $tabBody = $('.content[data-id = ' + id + '-content]'); $('.tab.tab-sel').removeClass('tab-sel'); $tab.addClass('tab-sel'); $('.content').hide(); $tabBody.show(); //Если клик по нижней вкладке(Например класс .bottom) if($me.is('.bottom')) { var offset = $tabBody.offset().top; $("body,html").scrollTop(offset); } }); });

I understood the essence, edit it a little, and everything works out.
@LADYX: var offset is just the number of pixels from the top of the page to the element.
This number and with it you can do any mathematical operation.
In your case, you need to compensate for these 60px , raising the page above.
@LADYX: The number 60 itself is straightforward not to insert into the code, otherwise the so-called "magic number" will turn out.
It is better to put in a separate variable of type var topMenuHeight = 60;
and substitute it already, or even measure the height of this fixed block "on the fly".
@LADYX: If you leave offset - 60 , then after a while you can forget what 60 is and why it is here.
Congratulations, you got a "magic number" 60 in the code, which is a mystery to you.
Writing offset - topMenuHeight unequivocally tells the reader that they subtracted the height of the top menu from the indent.
The abundance of "magic numbers" in the code will make it harder to read, or simply make it impossible to read it.

Automatic page scrolling

1 answer 1

More articles: