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

Question

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

FIDDLE

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

我试过 scrollToTop 但它没有用。请告诉我如何解决它。请看我的fidde。我还希望深红色列表项能够捕获 100% 的宽度和高度。我该怎么做。谢谢。ps:我想达到这样的效果Demo Site

Answer 1

@designerNProgrammer，在不依赖 jQuery/Javascript 的情况下让网站中的内容正常工作通常是一种很好的做法。然后，您可以使用 jQuery/Javascript 逐步增强这些功能。这就是我使用 jQuery 实现垂直窗口滚动的方式:

首先，我将向 #thumbs li's 添加一些 anchor 标记，指向我在 #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);
    });
}); 

在这里设置一个 fiddle :http://jsfiddle.net/k2ape/2/

您的响应问题似乎是与此问题标题相关的不同问题。这就是为什么我没有回答这个问题。我会针对您的响应问题提交一个关于 SO 的新问题，并以不同的方式表述标题。你会得到更多的回应。