您好我已经编写了一些代码,可以在点击后将页面滚动到一个元素,但在顺畅滚动之前它会跳转到页面顶部。有人可以解释一下我做错了吗?
这是脚本
$('a[href*="#"]').click(function(e){
e.preventDefault();
if($(this).attr('href') == '#') {
$('html, body').animate({
scrollTop: $('body').offset().top
}, 1000);
window.location.hash = '';
} else {
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top - $(this).height()
}, 1000);
window.location.hash = $(this).attr('href');
}
return false;
});
并告诉我在哪里可以学习JS :)请
答案 0 :(得分:0)
本教程和演示展示了如何实现这一目标。看看吧。 http://css-tricks.com/snippets/jquery/smooth-scrolling/
答案 1 :(得分:0)
这是菜单的HTML
<div class="menu">
<div class="top">
<ul class="menu_list">
<li><a href="#">Start</a></li>
<li><a href="#o_nas">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
这是菜单
的修改脚本//menu smooth scroll to element
$('a[href^="#"]').on('click',function(e){
$target = $(this).attr('href');
e.preventDefault();
$('.active').removeClass('active');
$(this).addClass('active');
if($(this).attr('href') == '#') {
$('html, body').stop().animate({
scrollTop: $('body').offset().top
}, 1000, function(){location.hash = $target;});
} else {
$('html, body').stop().animate({
scrollTop: $($target).offset().top + 57 - $('.menu').height()
//this is important to add + height of menu holder div in my case it's 57 this removes jump effect in firefox
}, 1000,function(){location.hash = $target});
}
return false;
});
我已经解决了我的问题,就是这样,上面的代码对我来说非常完美,我将它放在像其他程序员这样的我这里;)我们得到了单页网站,其中包含网址更改和平滑滚动效果: p