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

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

FIDDLE

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

我TRID scrollToTop但它没有工作。请告诉我如何解决它。请看我的fidde。而且我还希望绯红色列表项目能够捕捉100％的宽度和高度。我应该怎么做。谢谢。 Ps：我想达到这样的样子Demo Site

来源

2014-01-29 designerNProgrammer

你太亲近了，实际上只是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

来源

2014-01-29 16:04:10 maxinacube

你能让我成为小提琴吗？ – designerNProgrammer

我如何让深红李100％？ – designerNProgrammer

回答更新以解决您的问题 – maxinacube

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

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

来源

2014-01-29 17:30:46 Nick

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

回答

相关问题