Прокрутите до следующего якоря после прокрутки

Question

Я пишу веб-сайт, и я хочу создать некоторые divs/sections для окна. Когда пользователь останавливает прокрутку между двумя из этих разделов, div , который занимает больше места в этот момент, должен быть прокручен на, так что он будет размером с полноэкранным.

Answer 1

У меня нет предыдущего опыта с такими плагинами сторонних разработчиков, поэтому я не рекомендую «лучший».

Но вот некоторые примеры:

http://guidobouman.github.io/jquery-panelsnap/

http://wtm.github.io/jquery.snapscroll/

Я считаю, что это то, что вы ищете.

Edit: Это выглядит красиво и https://projects.lukehaas.me/scrollify/#options

Answer 2

Есть JQuery плагин, чтобы сделать это, но здесь хороший шаблон, чтобы увидеть, как вы можете реализовать свой собственный:

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

Вот соответствующий скроллинг JavaScript для облегчения функции, чтобы сделать его красивым и прокручивать:

//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 делает именно то, что вам нужно.

Если вся библиотека является слишком тяжелым для того, что вам нужно, вы могли бы попытаться переопределить логику с чем-то вроде этого https://github.com/alvarotrigo/fullPage.js/blob/master/pure%20javascript%20(Alpha)/javascript.fullPage.js#L897-L913