我创建了一个长水平页面并使用 anchor 导航到页面内的部分。我添加了jQuery平滑滚动功能但没有生效?
这是导航:
<ul class="nav">
<li><a href="#starters">Starters</a></li>
<li><a href="#main">Main Dishes</a></li>
<li><a href="#special">Special Dishes</a></li>
<li><a href="#side">Side Dishes</a></li>
</ul>
在内容中我添加了相应的 anchor :
<a name="starters"></a>
这是 jQuery 函数:
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1500, "easeInOutExpo");
event.preventDefault();
});
});
anchor 工作正常,单击导航会将您带到所需的部分,但它跳跃而不是滚动。
有什么想法吗?
最佳答案
很简单,将类添加到需要滚动的 div
中,例如下面的示例:
<ul class="nav">
<li class="a"><a href="#starters">Starters</a></li>
<li class="b"><a href="#main">Main Dishes</a></li>
<li class="c"><a href="#special">Special Dishes</a></li>
<li class="d"><a href="#side">Side Dishes</a></li>
</ul>
现在,你的js将是这样的:
$(function() {
$('#clickable element').bind('click',function(event){
$('#targetelement or div').stop().animate({
scrollLeft: $('.a').offset().left
}, 500);
event.preventDefault();
});
});
同样,你可以为 b、c、d 类构建 js。
关于jQuery 平滑水平滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19364508/