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

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

我尝试了一下，但没用。 请告诉我怎么修。 请看我的手稿。 我还希望深红列表项能够捕获100%的宽度和高度。我该怎么做呢。 谢谢

---

Ps：我想实现这样的目标，你离我太近了，它实际上只是

scrollTop

而不是scrollToTop。这对我很有用：

}))

如果添加normalize.css并从li中删除边距，则应将li设置为100%。在fiddle中，我没有添加规范化，只是将html和body设置为0边距或填充

小提琴：

---

规范化：

@DesignerProgrammer，通常情况下，不依赖jQuery/Javascript就能使站点中的内容正常工作是一种很好的做法。然后可以使用jQuery/Javascript逐步增强这些特性。下面是我使用jQuery实现垂直窗口滚动的方法：

首先，我将在

#拇指李的

中添加一些锚定标记，指向我在

#完整列表李的

上设置的id。这种HTML不需要Javascript就可以工作

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

在这里摆好小提琴：

---

与此问题的标题相比，您的回应问题似乎是一个不同的问题。所以我没有回答。我会为你的回复问题提交一个新的问题，并以不同的方式命名。你会得到更多的回应

你能给我做一把小提琴吗？我怎么能100%地做深红色的李呢？它不是100%的尺寸和高度。特别是在高度上。我希望它像上面的演示链接一样响应。为什么我不能将高度设置为100%？将CSS中的高度从600px更改为100%

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

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