动画ScrollTop用于单页锚的边导航
动画ScrollTop用于单页锚的边导航
提问于 2015-07-17 19:15:16
我正试图在一个页面上的锚点之间进行平稳的转换，在突出显示的一侧有一个固定的导航。我是一个完全的新手，所以我不知道如何实现"( document.body ).animate“，也不知道什么是完成转换所必需的。
平滑滚动到锚，而不是跳到锚。
这是js：
$('#firstlink').addClass('active');
$(window).scroll(function(){
$('.active').each(function(){
$(this).removeClass('active');
});
var scrollTop = $(window).scrollTop();
if($(window).scrollTop() + $(window).height() == $(document).height())
$('#fifthlink').addClass('active');
else if (scrollTop > $("#fifth").position().top)
$('#fifthlink').addClass('active');
else if (scrollTop > $("#fourth").position().top)
$('#fourthlink').addClass('active');
else if (scrollTop > $("#third").position().top)
$('#thirdlink').addClass('active');
else if (scrollTop > $("#second").position().top)
$('#secondlink').addClass('active');
else
$('#firstlink').addClass('active');
});以下是完整的jsfiddle：https://jsfiddle.net/e03u0kqe/
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-07-17 19:27:35
这个问题可能在其他地方得到了回答，但这应该可以做到：
$('#sidenav a').on('click', function(e) {
e.preventDefault();
var target = $(this).attr('href');
var scrollTo = $(target).offset().top;
var duration = 1000;
$('body').animate({
scrollTop: scrollTo
}, duration);
});在窗口滚动事件之后添加它。
Stack Overflow用户
发布于 2015-07-17 19:20:22
这可能对你有用：
http://www.dwuser.com/education/content/quick-guide-adding-smooth-scrolling-to-your-webpages/
我在我自己的网站上使用它，它运行得很好。
希望这对你有用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31483131
复制相关文章
相似问题
腾讯云开发者
