動畫使用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垂直滾動到指定位置

回答

相關問題