如何通過jQuery將滾動條移動到某個地方

我在項目中有一個列表，帶有一個滾動條。還有一個按鈕。所以當按下按鈕時，滾動會移動到給定的ID以使其可見。我看了類似的解決方案，但無法讓我的工作。如何通過jQuery將滾動條移動到某個地方

這裏是我的代碼：

function next() { 
    $("#example").css("background", "red"); 
} 

function goToByScroll(id) { 
    // Reove "link" from the ID 
    // Scroll 
    $('ul').animate({ 
     scrollTop: $("#" + id).offset().top() 
    }, 
     'slow'); 
} 

$("button").click(function (e) { 
    // Prevent a page reload when a link is pressed 
    e.preventDefault(); 
    // Call the scroll function 
    goToByScroll("example"); 
});

HTML：

<ul> 
    <li>Name1</li> 
    <li>Name2</li> 
    <li>Name3</li> 
    <li>Name4</li> 
    <li>Name5</li> 
    <li>Name6</li> 
    <li>Name7</li> 
    <li id="example">Name8</li> 
    <li>Name9</li> 
    <li>Name10</li> 
</ul> 
<button onClick="next()">Next</button>

http://jsfiddle.net/danials/f2UZT/ 任何想法，使其正常工作？它必須作爲一個函數工作，所以函數值將是一個ID，所以它移動到持有ID的元素。

來源

2014-07-06 Daniel JJ

代替偏移（）。頂（）'使用' offset（）。top'，只需從頂端刪除'（）' –

而不是

scrollTop: $("#" + id).offset().top()

使用此

scrollTop: $("#" + id).offset().top

，避免li去向上使用li高度，所以你的最終代碼會

$('ul').animate({ 
     scrollTop: $("#" + id).offset().top - $("#" + id).height() 
},'slow');

工作的`DEMO

來源

2014-07-06 06:50:21

感謝您的幫助。它的工作。但這不是很準確。無論如何要讓它準確。我嘗試了不同的類，有時它會找到該類，但是滾動到比元素高或低一點，所以元素會跳出框。無論如何想法？ –

@DanielJJ：回答更新:) –

您可以使用此滾動

$.fn.scrollView = function() { 
    return this.each(function() { 
    $('html, body').animate({ 
    scrollTop: $(this).offset().top 
    }, 1000); 
}); 
}

而對於目標按鈕和目標位置

$('#post-1').click(function (event) { 
    event.preventDefault(); 
    $('#contact').scrollView(); 
});

來源

2014-07-06 07:20:16 Rifat

如何通過jQuery將滾動條移動到某個地方

回答

相關問題