如何使用jQuery使元素滾動到視圖中？
[英]How do I get an element to scroll into view, using jQuery?
問題描述
我有一個HTML文檔，其中包含使用<ul><li><img...的網格格式圖像。 瀏覽器窗口同時具有垂直和水平滾動。
問題：單擊圖像<img> ，如何使整個文檔滾動到我剛剛單擊的圖像為top:20px; left:20px top:20px; left:20px ？
我在這里瀏覽過類似的文章...雖然我對JavaScript還是很陌生，但想了解如何自己實現。
11 個解決方案
解決方案1
352 2011-02-03 10:22:12
所有主流瀏覽器都支持一個名為scrollIntoView的DOM方法，該方法會將元素與視口的頂部/左側（或盡可能靠近）對齊。
$("#myImage")[0].scrollIntoView();
在受支持的瀏覽器上，您可以提供以下選項：
$("#myImage")[0].scrollIntoView({
behavior: "smooth", // or "auto" or "instant"
block: "start" // or "end"
});
或者，如果所有元素都有唯一的ID，則只需更改location對象的hash屬性以支持后退/前進按鈕：
$(document).delegate("img", function (e) {
if (e.target.id)
window.location.hash = e.target.id;
});
之后，只需將scrollTop / scrollLeft屬性調整為-20：
document.body.scrollLeft -= 20;
document.body.scrollTop -= 20;
解決方案2
184 已采納 2011-02-03 10:24:32
由於您想知道它是如何工作的，因此我將逐步解釋它。
首先，您要將一個函數綁定為圖像的單擊處理程序：
$('#someImage').click(function () {
// Code to do scrolling happens here
});
這會將點擊處理程序應用於id="someImage"的圖像。 如果要對所有圖像執行此操作，請將'#someImage'替換為'img' 。
現在查看實際的滾動代碼：
獲取圖像偏移量（相對於文檔）：
var offset = $(this).offset(); // Contains .top and .left從
top和left減去20：offset.left -= 20; offset.top -= 20;現在設置
<body>和<html>CSS滾動屬性和滾動屬性：$('html, body').animate({ scrollTop: offset.top, scrollLeft: offset.left });
解決方案3
11 2017-06-26 02:31:59
我見過的最簡單的解決方案
var offset = $("#target-element").offset();
$('html, body').animate({
scrollTop: offset.top,
scrollLeft: offset.left
}, 1000);
解決方案4
7 2011-02-03 10:22:16
看一下jQuery.scrollTo插件。 這是一個演示 。
這個插件有很多選項，超出了本機scrollIntoView所能提供的范圍。 例如，您可以將滾動設置為平滑，然后在滾動完成時設置回調。
您還可以查看所有標記為“ scroll”的JQuery插件 。
解決方案5
7 2011-02-03 10:25:46
有一些方法可以將元素直接滾動到視圖中，但是如果要滾動到元素的相對點，則必須手動進行操作：
在點擊處理程序內，獲取元素相對於文檔的位置，減去20並使用window.scrollTo ：
var pos = $(this).offset();
var top = pos.top - 20;
var left = pos.left - 20;
window.scrollTo((left < 0 ? 0 : left), (top < 0 ? 0 : top));
解決方案6
4 2014-12-10 17:04:04
這是一個快速的jQuery插件，可以很好地映射內置的瀏覽器功能：
$.fn.ensureVisible = function () { $(this).each(function () { $(this)[0].scrollIntoView(); }); };
...
$('.my-elements').ensureVisible();
解決方案7
3 2015-05-23 14:26:11
經過反復試驗，我想出了這個功能，也可以與iframe一起使用。
function bringElIntoView(el) {
var elOffset = el.offset();
var $window = $(window);
var windowScrollBottom = $window.scrollTop() + $window.height();
var scrollToPos = -1;
if (elOffset.top < $window.scrollTop()) // element is hidden in the top
scrollToPos = elOffset.top;
else if (elOffset.top + el.height() > windowScrollBottom) // element is hidden in the bottom
scrollToPos = $window.scrollTop() + (elOffset.top + el.height() - windowScrollBottom);
if (scrollToPos !== -1)
$('html, body').animate({ scrollTop: scrollToPos });
}
解決方案8
2 2016-08-27 03:28:08
只是一個小費。 僅適用於Firefox
解決方案9
1 2013-08-01 01:55:15
我的UI在拇指欄中有一個垂直滾動的拇指列表，目的是使當前拇指恰好位於拇指欄的中央。 我從批准的答案開始，但是發現有一些調整可以使當前的拇指真正居中。 希望這對其他人有幫助。
標記：
<ul id='thumbbar'>
<li id='thumbbar-123'></li>
<li id='thumbbar-124'></li>
<li id='thumbbar-125'></li>
</ul>
jQuery的：
// scroll the current thumb bar thumb into view
heightbar = $('#thumbbar').height();
heightthumb = $('#thumbbar-' + pageid).height();
offsetbar = $('#thumbbar').scrollTop();
$('#thumbbar').animate({
scrollTop: offsetthumb.top - heightbar / 2 - offsetbar - 20
});
解決方案10
0 2018-03-22 19:36:38
簡單的2個步驟即可向下滾動到結尾或底部。
步驟1：獲取可滾動（會話）div的完整高度。
步驟2：使用在步驟1中獲得的值在該scrollable（會話）div上應用scrollTop。
var fullHeight = $('#conversation')[0].scrollHeight;
$('#conversation').scrollTop(fullHeight);
以上步驟必須應用於對話div上的每個追加。
解決方案11
0 2019-06-19 16:13:06
在嘗試找到一種能夠處理所有情況的解決方案（用於動畫滾動的選項，對象滾動到視圖中時在其周圍進行填充，甚至在諸如iframe等晦澀的情況下也可以使用）之后，我最終結束了為此編寫自己的解決方案。 由於當許多其他解決方案失敗時它似乎可以工作，所以我想分享一下：
function scrollIntoViewIfNeeded($target, options) {
var options = options ? options : {},
$win = $($target[0].ownerDocument.defaultView), //get the window object of the $target, don't use "window" because the element could possibly be in a different iframe than the one calling the function
$container = options.$container ? options.$container : $win,
padding = options.padding ? options.padding : 20,
elemTop = $target.offset().top,
elemHeight = $target.outerHeight(),
containerTop = $container.scrollTop(),
//Everything past this point is used only to get the container's visible height, which is needed to do this accurately
containerHeight = $container.outerHeight(),
winTop = $win.scrollTop(),
winBot = winTop + $win.height(),
containerVisibleTop = containerTop < winTop ? winTop : containerTop,
containerVisibleBottom = containerTop + containerHeight > winBot ? winBot : containerTop + containerHeight,
containerVisibleHeight = containerVisibleBottom - containerVisibleTop;
if (elemTop < containerTop) {
//scroll up
if (options.instant) {
$container.scrollTop(elemTop - padding);
} else {
$container.animate({scrollTop: elemTop - padding}, options.animationOptions);
}
} else if (elemTop + elemHeight > containerTop + containerVisibleHeight) {
//scroll down
if (options.instant) {
$container.scrollTop(elemTop + elemHeight - containerVisibleHeight + padding);
} else {
$container.animate({scrollTop: elemTop + elemHeight - containerVisibleHeight + padding}, options.animationOptions);
}
}
}
$target是一個jQuery對象，其中包含您希望在需要時滾動到視圖中的對象。
options （可選）可以包含在對象中傳遞的以下選項：
options.$container一個jQuery對象，指向$ target的包含元素（換句話說，帶有滾動條的dom中的元素）。 默認為包含$ target元素的窗口，並且足夠聰明以選擇iframe窗口。 請記住在屬性名稱中包含$。
options.padding滾動到視圖中時對象上方或下方添加的像素填充。 這樣，它就不能緊貼窗口邊緣。 默認為20
options.instant如果設置為true，將不使用jQuery animate，並且滾動條將立即彈出到正確的位置。 默認為false。
options.animationOptions您希望傳遞給jQuery animate函數的任何jQuery選項（請參閱http://api.jquery.com/animate/ ）。 這樣，您可以更改動畫的持續時間，或者在滾動完成后執行回調函數。 僅當options.instant設置為false時，此方法才有效。 如果您需要即時動畫但帶有回調，請設置options.animationOptions.duration = 0而不是使用options.instant = true 。
如何使用jQuery在滾動畫面中淡入淡出圖像？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.