jQuery平滑水平滚动

我创建了一个长的水平页面，并使用锚点导航到页面内的部分。我添加了一个jQuery平滑滚动功能，但它没有影响？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>

在我添加相应的锚内容：

<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(); 
}); 
});

锚的做工精细，点击导航会把你带到想要的部分，但是它可以在ju mps而不是滚动。

任何想法为什么？

来源

2013-10-14 SlightlyClever

它看起来像你的代码是，除了这是正确的：

<a name="starters"></a>

变化name到id。据我所知，锚定标记没有HTML name属性。另外，你不需要为你的部分“相应的锚点”。假设您的部分包装有<section>或<div>，只需给每个包装区块元素分配一个id，与每个锚链接中的href相同。所以：

<section id="starters">content</section>

来源

2013-11-02 23:11:49 th3lonius

这对于HTML5是正确的，但是的确有其他名称：http://www.w3schools.com/tags/att_a_name.asp – Waclock

也许你忘了使用jQuery的放宽动画 http://matthewlein.com/experiments/easing.html

来源

2014-01-07 10:58:50 therealpablors

请注意，[仅限链接回答]（http：// meta .stackoverflow.com/tags/link-only-answers/info），所以答案应该是搜索解决方案的终点（而另一个引用的中途停留时间往往会随着时间的推移而变得过时）。请考虑在此添加独立的摘要，并将链接保留为参考。 – kleopatra

感谢您的评论Kleopatra。我有和Rumman相同的问题，解决方案是使用jQuery缓动库来启用动画 – therealpablors

这是简单的添加类的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。

来源

2017-03-31 04:52:57 Maulik

jQuery平滑水平滚动

回答

相关问题