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

Question

嘿，伙计们，我是JS的新手。我是一个垂直图像滚动体上的文字。现在，我使用这个代码从左到右滚动到LI，页面被滚动到Li到达的中心。现在，我想将这个功能集成到垂直滚动体上。我有6个div设置，当我点击拇指，李的应该滚动到那个位置。这是我的水平代码。

FIDDLE

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

我试过scrollToTop，但它不起作用。请告诉我怎么修。请看我的小提琴。我还想要的深红色清单项目捕捉100%的宽度和高度。我该怎么做。谢谢。Ps:我想实现像这样的Demo Site

Answer 1

@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/

您的反应问题似乎是一个与这个问题的标题不同的问题。所以我才没回答。我会提交一个新的问题，所以你的反应问题和词的标题不同。你会得到更多的回应。

Answer 2

你离我这么近，其实只是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);
});


});

If you add a normalize.css and remove the margin from the li that should put the li to 100%. In the fiddle I didn't add a normalize, just set html and body to have 0 margin or padding.

Fiddle: http://jsfiddle.net/maxinacube/6Y3WX
Normalize: http://necolas.github.io/normalize.css