There is a long page, where a lot of content. The page is divided into sections, such as landing. In the body of the page, when it is scrolled there is a block 100% high of the screen. So: is it possible to make the page automatically scroll to the top of this block when scrolling the page, as soon as this block hits the visible part of the screen? Something like scrolling the page in sections. I need this principle to work only for one block / section on this page. The whole plugin is not needed for this, and it is not suitable. The page has a script of modal windows (there are a lot of them on the page with a lot of content), it also stops working correctly with similar plugins, namely scrolling does not work correctly, which is obvious. Therefore, this effect is needed only for a fragment of the page. Thank you for your help!

I wrote a script, but it does not work. What could be the error? Correct, please.

$(window).scroll(function() { if(document.body.scrollTop === 0) { $('#anchor') $('html, body').animate({scrollTop: $('#anchor').offset().top}, 2000); return false;}); } });
  • And what does not work? Logically, you described everything correctly. It is necessary to hang up on the event of the scroll mouse to check whether the block is visible. If yes, scroll to this block. - xaja

1 answer 1

plug-in: when a block appears from the bottom or from the top of the window at the end of the scroll, the page automatically scrolls to the top of this block. select if necessary parameter pause 50 - 350

  $(function(){ (function($) { $.fn.blockInheart = function(speed, pause) { function vis(el) { var top = $(el).offset().top, height = $(window).height(), scroll = $(window).scrollTop(); return scroll > top - height && scroll < top + height } this.each(function(indx, el) { var hide = true, timer; $(window).scroll(function() { window.clearTimeout(timer); if (!vis(el)) hide = true; timer = window.setTimeout(function(event) { if (vis(el) && hide) $("body, html").animate({ scrollTop: $(el).offset().top }, speed, function() { hide = false }) }, pause) }) }); return this } })(jQuery); $(".hot").blockInheart(800,300) }) 
  html, body { height: 100%; } .hot { border: 1px dashed Gray; padding: 5px; height: 100%; width: 100px; margin: 500px auto; background-color: rgb(30, 144, 255); } .hot:nth-of-type(2) { background-color: rgb(220, 20, 60); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> scrollUp <div class="hot">1</div> <div class="hot">2</div>

  • I greet you! Yes, of course, everything works. There are only two points, do not consider it intrusive. First, when scrolling up from the bottom of the page, there is no such effect, and this is very necessary. And second, the page automatically scrolls to the top of the block when its visible part appears, I believe, already 1 pixel, right? And is it possible to increase this most visible part, after which the page would scroll, in pixel or percentage ratio? I am very grateful to you for the help! - LADYX
  • one
    @LADYX see new version - roni
  • Thank you so much for your help! Yes, everything is fine, everything works! I meant, of course, not a pause, but to increase the visible part of the viewing block, after which the scrolling would work. But now I ride, I think, in principle, it became more convenient for the user to view. Good luck to you! - LADYX