Scroll to the next anchor after scrolling.

Question

I am writing a website and I want to create some divs / section the size of a window. When a user stops scrolling between two of these divs, the div that is taking up more space at that moment should scroll with , so it will be resized in full screen mode.

Answer 1

I have no previous experience with such third-party plugins, so I do not recommend the “best” one.

But here are a few examples:

http://guidobouman.imtqy.com/jquery-panelsnap/

http://wtm.imtqy.com/jquery.snapscroll/

I believe that this is what you are looking for.

Edit: this one looks good also https://projects.lukehaas.me/scrollify/#options

Answer 2

There are jQuery plugins for this, but here is a good template to see how you can implement your own:

https://startbootstrap.com/template-overviews/scrolling-nav/

Here, the appropriate scrollable JavaScript to make the function easier makes it nice and scrollable:

//jQuery to collapse the navbar on scroll $(window).scroll(function() { if ($(".navbar").offset().top > 50) { $(".navbar-fixed-top").addClass("top-nav-collapse"); } else { $(".navbar-fixed-top").removeClass("top-nav-collapse"); } }); //jQuery for page scrolling feature - requires jQuery Easing plugin $(function() { $('a.page-scroll').bind('click', function(event) { var $anchor = $(this); $('html, body').stop().animate({ scrollTop: $($anchor.attr('href')).offset().top }, 1500, 'easeInOutExpo'); event.preventDefault(); }); }); 

Answer 3

FullPage.js does exactly what you need.

If the whole library is too heavy for what you need, you can try redoing the logic with something like https://github.com/alvarotrigo/fullPage.js/blob/master/pure%20javascript%20(Alpha)/javascript .fullPage.js # L897-L913