Question

嘿伙计们我是JS的新手。我是垂直图像卷轴上的措辞。现在，我使用此代码从左到右滚动到LI，页面滚动到Li到达的中心。现在我想将此功能集成到垂直滚动条。我设置了6个div，当我点击拇指时，li应该滚动到那个位置。这是我的水平代码。

$('html, body').animate({                    
scrollLeft: ((thisImg.offset().left)-windowWidth+imagewidth)}, 1300);});

我trid scrollToTop但它没有用。请告诉我如何解决它。请看我的fidde。我还希望深红色列表项能够捕获100％的宽度和高度。我该怎么做谢谢。 Ps：我希望达到类似Demo Site

的目的

Answer 1

你是如此接近，实际上只是scrollTop而不是scrollToTop。这对我有用：

jQuery(document).ready(function($) {
    $("#thumbs li").click(function() {
        var windowWidth = jQuery(window).width()/2,
            index = $(this).index(),
            thisImg = $("#fullList li:eq("+index+")"),
            imagewidth = thisImg.width()/2;

    $('html, body').animate({
        scrollTop: thisImg.offset().top
    }, 1300);
});


});

如果添加一个normalize.css并从li中删除应该将li设置为100％的边距。在小提琴中我没有添加规范化，只需将html和body设置为0边距或填充。

小提琴：http://jsfiddle.net/maxinacube/6Y3WX 标准化：http://necolas.github.io/normalize.css

Answer 2

@designerNProgrammer，通常很好的做法是让你的网站中的东西不依赖于jQuery / Javascript。然后，您可以使用jQuery / Javascript逐步增强这些功能。这就是我使用jQuery接近垂直窗口滚动的方法：

首先，我会向#thumbs li's添加一些锚标记，指向我在#fullList li's上设置的ID。这个HTML没有Javascript。

<ul id="thumbs">
    <li><a href="#one">1</a></li>
    <li><a href="#two">2</a></li>
    <li><a href="#three">3</a></li>
    <li><a href="#four">4</a></li>
    <li><a href="#five">5</a></li>
    <li><a href="#six">6</a></li>
</ul>
<ul id="fullList">
    <li id="one">1</li>
    <li id="two">2</li>
    <li id="three">3</li>
    <li id="four">4</li>
    <li id="five">5</li>
    <li id="six">6</li>
</ul>

现在我们可以使用这个现有/正常运行的代码来逐步增强带动画的窗口滚动。

$(function() {
    $("#thumbs li a").click(function(e) {   
        e.preventDefault();
        var elId = $(this).attr('href');
        var elPos = $(elId).offset().top;

        $('html, body').animate({                    
            scrollTop: elPos
        }, 1300);
    });
});

在这里设置一个小提琴：http://jsfiddle.net/k2ape/2/

您的回应问题似乎与此问题的标题有关。这就是我没有回答的原因。我会针对您的回复问题提交一个关于SO的新问题，并以不同的方式说出标题。你会收到更多回复。

动画使用jquery垂直滚动到特定位置

2 个答案: