[英]Scroll to next anchor after scrolling
我正在写一个网站,我想建立一些窗口大小的div /部分。 当用户停止在这些div中的两个之间 滚动时 , 在那一刻需要更多空间的div应该滚动 ,因此它将是全窗口大小的。
有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();
});
});
FullPage.js完全符合您的需求。
如果整个库太重而无法满足您的需求,您可以尝试使用类似的方式重新实现逻辑https://github.com/alvarotrigo/fullPage.js/blob/master/pure%20javascript%20(Alpha)/ javascript.fullPage.js#L897-L913
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.