Question

我有一个这样的菜单：

<ul id="menu">
<li><a href="#home_slider" id="home">Home</a></li>
<li><a href="#portfolio_slider" id="portfolio">Potfolio</a></li>
<li><a href="#contact_slider" id="contact">Contact</a></li>
</ul>

我想使用ScrollTo（）在点击时转到部分。我遇到了JQuery的问题，到目前为止，我有：

$("#menu a").click(function(event) {
$("#menu a").removeClass('selected');
$(this).addClass('selected');
$('.sliders').scrollTo($(this).attr('href'));      
 //cancel the link default behavior
 return false;        
});

我不希望屏幕移动，我只想让.sliders div水平滚动到正确的滑块。

点击此处查看更多代码：http://www.rickdonohoe.co.uk。

页面页脚距离页面很远，因为其中一个滑块的长度非常长。我怎么能解决这个问题让它变得更有活力？也许坚持到页面底部？

感谢您的帮助，

瑞克

Answer 1

您要做的是为left元素的margin-left或.sliders属性设置动画。 scrollTo适用于带滚动条的元素，因此您可以在.sliders元素的父元素上调用它。

$("#menu a").click(function(event) {
    $("#menu a").removeClass('selected');
    $(this).addClass('selected');
    $('.sliders').animate({left : ($($(this).attr('href')).position().left * -1)}, 500);      
    //cancel the link default behavior
    return false;        
});

($($(this).attr('href')).position().left * -1)：这段代码选择点击链接的href值，获取它与父元素的相对位置，然后将其乘以负值，这样动画的方向就会正确。

更新

您可以使用此CSS将页脚修复到viewport的底部：

#footer {
    position   : fixed;
    bottom     : 0;
    left       : 0;
    right      : 0;
    background : #fff;
}

更新

此外，如果您添加此位JavaScript，您可以动态设置文档的高度，使其没有一堆空格：.parent().height($($(this).attr('href')).height());

$("#menu a").click(function(event) {
    $("#menu a").removeClass('selected');
    $(this).addClass('selected');
    $('.sliders').animate({left : ($($(this).attr('href')).position().left * -1)}, 500).parent().height($($(this).attr('href')).height());      
    //cancel the link default behavior
    return false;        
});

Answer 2

请记住始终查看文档！

http://api.jquery.com/scrollTop/

scrollTop()
    .scrollTop() 
scrollTop( value  )
    .scrollTop( value )

它不接受jquery或html元素。它可以或设置一个值。

您需要使用：

http://api.jquery.com/position/

**Description:** Get the current coordinates of the first element in the set
of matched elements, relative to the offset parent.

还使用后代选择器进行评估： $（$ this，“。select”）

要设置动画，您可以使用jQuery animate：

[http://api.jquery.com/animate/][3]

JQuery和ScrollTo（）函数的问题

2 个答案:

更新

更新