blocks|key|3206304|text|有一个名为scrollIntoView的DOM方法，所有主流浏览器都支持它，它可以将元素与视口的顶部/左侧对齐(或尽可能靠近)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3206305|$("#myImage")[0].scrollIntoView();|code-block|syntax|javascript|3206306|在支持的浏览器上，您可以提供以下选项：|3206307|$("#myImage")[0].scrollIntoView({
++++behavior:+"smooth",+//+or+"auto"+or+"instant"
++++block:+"start"+//+or+"end"
});|3206308|或者，如果所有元素都有唯一的if，您可以只更改location对象的hash属性以支持后退/前进按钮：|3206309|$(document).delegate("img",+function+(e)+{
++++if+(e.target.id)
++++++++window.location.hash+=+e.target.id;
});|3206310|在此之后，只需将scrollTop/scrollLeft属性调整-20：|3206311|document.body.scrollLeft+-=+20;
document.body.scrollTop+-=+20;|3206312|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/DOM/element.scrollIntoView|1|https://developer.mozilla.org/en/DOM/window.location^0|5|E|5|E|0|0|0|0|0|N|8|Y|4|N|8|1|0|0|8|9|I|A|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|F|3|G|5|H|7|1C|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1D|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|1E|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1F|8|@$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]]|D|@$9|1K|A|1L|1|1M]]|E|$]]|$1|Q|3|R|5|H|7|1N|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|6|7|1O|8|@$9|1P|A|1Q|B|C]|$9|1R|A|1S|B|C]]|D|@]|E|$]]|$1|U|3|V|5|H|7|1T|8|@]|D|@]|E|$I|J]]|$1|W|3|-4|5|6|7|1U|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]|14|$5|Z|10|11|E|$12|15]]]]

There's a DOM method called <a href="https://developer.mozilla.org/en/DOM/element.scrollIntoView" rel="noreferrer"><code>scrollIntoView</code></a>, which is supported by all major browsers, that will align an element with the top/left of the viewport (or as close as possible).

<pre><code>$("#myImage")[0].scrollIntoView();
</code></pre>

On supported browsers, you can provide options:

<pre><code>$("#myImage")[0].scrollIntoView({
 behavior: "smooth", // or "auto" or "instant"
 block: "start" // or "end"
});
</code></pre>

Alternatively, if all the elements have unique IDs, you can just change the <code>hash</code> property of the <a href="https://developer.mozilla.org/en/DOM/window.location" rel="noreferrer"><code>location</code></a> object for back/forward button support:

<pre><code>$(document).delegate("img", function (e) {
 if (e.target.id)
 window.location.hash = e.target.id;
});
</code></pre>

After that, just adjust the <code>scrollTop</code>/<code>scrollLeft</code> properties by -20:

<pre><code>document.body.scrollLeft -= 20;
document.body.scrollTop -= 20;
</code></pre>

blocks|key|2992662|text|请看一下jQuery.scrollTo插件。这是一个demo。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2992663|这个插件有很多超出native+scrollIntoView所能提供的选项。例如，您可以将滚动设置为平滑，然后设置滚动结束时的回调。|2992664|你也可以看看all+the+JQuery+plugins+tagged+with+"scroll"。|2992665|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/flesler/jquery.scrollTo|1|http://demos.flesler.com/jquery/scrollTo/|2|https://developer.mozilla.org/en/DOM/element.scrollIntoView|3|https://plugins.jquery.com/tag/scroll/^0|4|F|0|Q|4|1|0|9|L|2|0|6|17|3|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]|$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|F|3|G|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|H|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]|R|$5|K|L|M|C|$N|S]]|T|$5|K|L|M|C|$N|U]]]]

Have a look at the <a href="https://github.com/flesler/jquery.scrollTo" rel="nofollow">jQuery.scrollTo</a> plugin. Here's a <a href="http://demos.flesler.com/jquery/scrollTo/" rel="nofollow">demo</a>.

This plugin has a lot of options that go beyond what <a href="https://developer.mozilla.org/en/DOM/element.scrollIntoView" rel="nofollow">native scrollIntoView</a> offers you. For instance, you can set the scrolling to be smooth, and then set a callback for when the scrolling finishes.

You can also have a look at <a href="https://plugins.jquery.com/tag/scroll/" rel="nofollow">all the JQuery plugins tagged with "scroll"</a>.

blocks|key|285186|text|既然你想知道它是如何工作的，我将一步一步地解释。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|285187|首先，您希望绑定一个函数作为图像的单击处理程序：|285188|$('#someImage').click(function+()+{
++++//+Code+to+do+scrolling+happens+here
});|code-block|syntax|javascript|285189|这将对具有id="someImage"的图像应用单击处理程序。如果要对所有图像执行此操作，请使用'img'替换'#someImage'。|offset|length|style|CODE|285190|现在来看实际的滚动代码：|285191|285192|获取图像偏移量(相对于文档)：|ordered-list-item|285193|285194|var+offset+=+$(this).offset()；//包含.top和.left|285195|从top和left中减去20：|unordered-list-item|285196|285197|offset.left+-=+20；offset.top+-=+20；|285198|现在为<body>和<html>的顶部滚动和左侧滚动CSS属性添加动画效果：|285199|285200|$('html，body').animate({+scrollTop:+offset.top，scrollLeft:+offset.left+});|285201|entityMap^0|0|0|0|5|E|1C|5|1J|C|0|0|0|0|0|0|1|3|5|4|0|0|0|3|6|A|6|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1B|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1C|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1D|8|@$K|1E|L|1F|M|N]|$K|1G|L|1H|M|N]|$K|1I|L|1J|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1K|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|1M|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1O|8|@]|9|@]|A|$]]|$1|X|3|Y|5|Z|7|1P|8|@$K|1Q|L|1R|M|N]|$K|1S|L|1T|M|N]]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1U|8|@]|9|@]|A|$]]|$1|11|3|12|5|6|7|1V|8|@]|9|@]|A|$]]|$1|13|3|14|5|Z|7|1W|8|@$K|1X|L|1Y|M|N]|$K|1Z|L|20|M|N]]|9|@]|A|$]]|$1|15|3|-4|5|6|7|21|8|@]|9|@]|A|$]]|$1|16|3|17|5|6|7|22|8|@]|9|@]|A|$]]|$1|18|3|-4|5|6|7|23|8|@]|9|@]|A|$]]]|19|$]]

Since you want to know how it works, I'll explain it step-by-step.

First you want to bind a function as the image's click handler:

<pre><code>$('#someImage').click(function () {
 // Code to do scrolling happens here
});
</code></pre>

That will apply the click handler to an image with <code>id="someImage"</code>. If you want to do this to all images, replace <code>'#someImage'</code> with <code>'img'</code>.

Now for the actual scrolling code:

<ol>
<li>Get the image offsets (relative to the document):

<pre><code>var offset = $(this).offset(); // Contains .top and .left
</code></pre></li>
<li>Subtract 20 from <code>top</code> and <code>left</code>:

<pre><code>offset.left -= 20;
offset.top -= 20;
</code></pre></li>
<li>Now animate the scroll-top and scroll-left CSS properties of <code>&lt;body&gt;</code> and <code>&lt;html&gt;</code>:

<pre><code>$('html, body').animate({
 scrollTop: offset.top,
 scrollLeft: offset.left
});
</code></pre></li>
</ol>

blocks|key|3206353|text|有一些方法可以将元素直接滚动到视图中，但如果要从元素相对滚动到某个点，则必须手动执行此操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3206354|在单击处理程序中，获取元素相对于文档的位置，减去20并使用window.scrollTo|offset|length|style|CODE|3206355|var+pos+=+$(this).offset();
var+top+=+pos.top+-+20;
var+left+=+pos.left+-+20;
window.scrollTo((left+<+0+?+0+:+left),+(top+<+0+?+0+:+top));|code-block|syntax|javascript|3206356|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/Window.scrollTo^0|0|O|2|T|F|T|F|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@$D|W|E|X|F|G]|$D|Y|E|Z|F|G]]|9|@$D|10|E|11|1|12]]|A|$]]|$1|H|3|I|5|J|7|13|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

There are methods to scroll element directly into the view, but if you want to scroll to a point relative from an element, you have to do it manually:

Inside the click handler, get the position of the element relative to the document, subtract <code>20</code> and use <a href="https://developer.mozilla.org/en/Window.scrollTo" rel="noreferrer"><code>window.scrollTo</code></a>:

<pre><code>var pos = $(this).offset();
var top = pos.top - 20;
var left = pos.left - 20;
window.scrollTo((left &lt; 0 ? 0 : left), (top &lt; 0 ? 0 : top));
</code></pre>

blocks|key|2992720|text|我的UI在缩略栏中有一个垂直滚动的拇指列表，目标是使当前的拇指正好位于缩略栏的中心。我从批准的答案开始，但发现有一些调整，以真正居中当前的拇指。希望这对其他人有帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2992721|标记：|2992722|<ul+id='thumbbar'>
++++<li+id='thumbbar-123'></li>
++++<li+id='thumbbar-124'></li>
++++<li+id='thumbbar-125'></li>
</ul>|code-block|syntax|javascript|2992723|jquery：|2992724|//+scroll+the+current+thumb+bar+thumb+into+view
heightbar+++=+$('#thumbbar').height();
heightthumb+=+$('#thumbbar-'+%2B+pageid).height();
offsetbar+++=+$('#thumbbar').scrollTop();


$('#thumbbar').animate({
++++scrollTop:+offsetthumb.top+-+heightbar+/+2+-+offsetbar+-+20
});|2992725|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

My UI has a vertical scrolling list of thumbs within a thumbbar
The goal was to make the current thumb right in the center of the thumbbar.
I started from the approved answer, but found that there were a few tweaks to truly center the current thumb. hope this helps someone else.

markup:

<pre><code>&lt;ul id='thumbbar'&gt;
 &lt;li id='thumbbar-123'&gt;&lt;/li&gt;
 &lt;li id='thumbbar-124'&gt;&lt;/li&gt;
 &lt;li id='thumbbar-125'&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

jquery:

<pre><code>// 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
});
</code></pre>

blocks|key|2992742|text|这是一个快速的jQuery插件，可以很好地映射内置的浏览器功能：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2992743|$.fn.ensureVisible+=+function+()+{+$(this).each(function+()+{+$(this)[0].scrollIntoView();+});+};

...

$('.my-elements').ensureVisible();|code-block|syntax|javascript|2992744|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here's a quick jQuery plugin to map the built in browser functionality nicely:

<pre><code>$.fn.ensureVisible = function () { $(this).each(function () { $(this)[0].scrollIntoView(); }); };

...

$('.my-elements').ensureVisible();
</code></pre>

blocks|key|285231|text|经过反复试验，我想出了这个函数，也适用于iframe。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|285232|function+bringElIntoView(el)+{++++
++++var+elOffset+=+el.offset();
++++var+$window+=+$(window);
++++var+windowScrollBottom+=+$window.scrollTop()+%2B+$window.height();
++++var+scrollToPos+=+-1;
++++if+(elOffset.top+<+$window.scrollTop())+//+element+is+hidden+in+the+top
++++++++scrollToPos+=+elOffset.top;
++++else+if+(elOffset.top+%2B+el.height()+>+windowScrollBottom)+//+element+is+hidden+in+the+bottom
++++++++scrollToPos+=+$window.scrollTop()+%2B+(elOffset.top+%2B+el.height()+-+windowScrollBottom);
++++if+(scrollToPos+!==+-1)
++++++++$('html,+body').animate({+scrollTop:+scrollToPos+});
}|code-block|syntax|javascript|285233|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

After trial and error I came up with this function, works with iframe too.

<pre><code>function bringElIntoView(el) { 
 var elOffset = el.offset();
 var $window = $(window);
 var windowScrollBottom = $window.scrollTop() + $window.height();
 var scrollToPos = -1;
 if (elOffset.top &lt; $window.scrollTop()) // element is hidden in the top
 scrollToPos = elOffset.top;
 else if (elOffset.top + el.height() &gt; windowScrollBottom) // element is hidden in the bottom
 scrollToPos = $window.scrollTop() + (elOffset.top + el.height() - windowScrollBottom);
 if (scrollToPos !== -1)
 $('html, body').animate({ scrollTop: scrollToPos });
}
</code></pre>

blocks|key|279596|text|这只是个提示。仅适用于firefox|type|unstyled|depth|inlineStyleRanges|entityRanges|data|279597|Element.scrollIntoView();|offset|length|279598|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView#Browser_compatibility^0|0|0|P|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

Just a tip. Works on firefox only

<a href="https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView#Browser_compatibility" rel="nofollow">Element.scrollIntoView();</a>

blocks|key|2992796|text|我见过的最简单的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2992797|var+offset+=+$("#target-element").offset();
$('html,+body').animate({
++++scrollTop:+offset.top,
++++scrollLeft:+offset.left
},+1000);|code-block|syntax|javascript|2992798|Tutorial+Here|offset|length|2992799|entityMap|0|LINK|mutability|MUTABLE|url|https://www.abeautifulsite.net/smoothly-scroll-to-an-element-without-a-jquery-plugin-2^0|0|0|0|D|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Simplest solution I have seen

<pre><code>var offset = $("#target-element").offset();
$('html, body').animate({
 scrollTop: offset.top,
 scrollLeft: offset.left
}, 1000);
</code></pre>

<a href="https://www.abeautifulsite.net/smoothly-scroll-to-an-element-without-a-jquery-plugin-2" rel="noreferrer">Tutorial Here</a>

blocks|key|3206482|text|向下滚动到结尾或底部的两个简单步骤。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3206483|Step1:获取可滚动(对话)+div的完整高度。|3206484|Step2:使用在step1中获得的值在可滚动(对话)+div上应用scrollTop。|3206485|var+fullHeight+=+$('#conversation')[0].scrollHeight;

$('#conversation').scrollTop(fullHeight);|code-block|syntax|javascript|3206486|以上步骤必须应用于对话div上的每个追加。|3206487|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|R|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Simple 2 steps for scrolling down to end or bottom. 

Step1: get the full height of scrollable(conversation) div.

Step2: apply scrollTop on that scrollable(conversation) div using the value 
 obtained in step1.

<pre><code>var fullHeight = $('#conversation')[0].scrollHeight;

$('#conversation').scrollTop(fullHeight);
</code></pre>

Above steps must be applied for every append on the conversation div.

blocks|key|3206510|text|在试图找到一种可以处理每种情况的解决方案(滚动动画选项，对象滚动进入视图时在对象周围填充，甚至在模糊的情况下也可以工作，比如在iframe中)之后，我最终编写了自己的解决方案。由于它似乎在许多其他解决方案都失败的情况下仍然有效，所以我想我应该分享一下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3206511|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+%2B+$win.height(),
++++containerVisibleTop+=+containerTop+<+winTop+?+winTop+:+containerTop,
++++containerVisibleBottom+=+containerTop+%2B+containerHeight+>+winBot+?+winBot+:+containerTop+%2B+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+%2B+elemHeight+>+containerTop+%2B+containerVisibleHeight)+{
++++++++//scroll+down
++++++++if+(options.instant)+{
++++++++++++$container.scrollTop(elemTop+%2B+elemHeight+-+containerVisibleHeight+%2B+padding);
++++++++}+else+{
++++++++++++$container.animate({scrollTop:+elemTop+%2B+elemHeight+-+containerVisibleHeight+%2B+padding},+options.animationOptions);
++++++++}
++++}
}|code-block|syntax|javascript|3206512|$target是一个jQuery对象，其中包含您希望在需要时滚动到视图中的对象。|offset|length|style|CODE|3206513|options+(可选)可以包含在对象中传递的以下选项：|3206514|options.$container+-指向$target的包含元素(换句话说，dom中带有滚动条的元素)的jQuery对象。默认为包含$target元素的窗口，并且足够智能，可以选择iframe窗口。请记住在属性名称中包含$。|3206515|options.padding+-滚动到视图中时在对象上方或下方添加的像素填充。这样就不适合靠窗口的边缘了。默认为20。|3206516|options.instant+-如果设置为true，将不使用jQuery动画，滚动将立即弹出到正确的位置。默认为false。|3206517|options.animationOptions+-希望传递给jQuery动画函数的任何jQuery选项(请参见http://api.jquery.com/animate/)。这样，您就可以更改动画的持续时间，或者在滚动完成时执行回调函数。这仅在options.instant设置为false时有效。如果需要具有即时动画但具有回调，请设置options.animationOptions.duration+=+0而不是使用options.instant+=+true。|3206518|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/animate/^0|0|0|0|7|0|0|7|0|0|I|0|0|F|0|0|F|0|0|O|3F|F|4P|11|5V|M|1K|U|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|16|8|@$I|17|J|18|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|19|8|@$I|1A|J|1B|K|L]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1C|8|@$I|1D|J|1E|K|L]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1F|8|@$I|1G|J|1H|K|L]]|9|@]|A|$]]|$1|S|3|T|5|6|7|1I|8|@$I|1J|J|1K|K|L]]|9|@]|A|$]]|$1|U|3|V|5|6|7|1L|8|@$I|1M|J|1N|K|L]|$I|1O|J|1P|K|L]|$I|1Q|J|1R|K|L]|$I|1S|J|1T|K|L]]|9|@$I|1U|J|1V|1|1W]]|A|$]]|$1|W|3|-4|5|6|7|1X|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

After trying to find a solution that handled every circumstance (options for animating the scroll, padding around the object once it scrolls into view, works even in obscure circumstances such as in an iframe), I finally ended up writing my own solution to this. Since it seems to work when many other solutions failed, I thought I'd share it:

<pre><code>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 &lt; winTop ? winTop : containerTop,
 containerVisibleBottom = containerTop + containerHeight &gt; winBot ? winBot : containerTop + containerHeight,
 containerVisibleHeight = containerVisibleBottom - containerVisibleTop;

 if (elemTop &lt; containerTop) {
 //scroll up
 if (options.instant) {
 $container.scrollTop(elemTop - padding);
 } else {
 $container.animate({scrollTop: elemTop - padding}, options.animationOptions);
 }
 } else if (elemTop + elemHeight &gt; containerTop + containerVisibleHeight) {
 //scroll down
 if (options.instant) {
 $container.scrollTop(elemTop + elemHeight - containerVisibleHeight + padding);
 } else {
 $container.animate({scrollTop: elemTop + elemHeight - containerVisibleHeight + padding}, options.animationOptions);
 }
 }
}
</code></pre>

<code>$target</code> is a jQuery object containing the object you wish to scroll into view if needed.

<code>options</code> (optional) can contain the following options passed in an object:

<code>options.$container</code> - a jQuery object pointing to the containing element of $target (in other words, the element in the dom with the scrollbars). Defaults to the window that contains the $target element and is smart enough to select an iframe window. Remember to include the $ in the property name.

<code>options.padding</code> - the padding in pixels to add above or below the object when it is scrolled into view. This way it is not right against the edge of the window. Defaults to 20.

<code>options.instant</code> - if set to true, jQuery animate will not be used and the scroll will instantly pop to the correct location. Defaults to false.

<code>options.animationOptions</code> - any jQuery options you wish to pass to the jQuery animate function (see <a href="http://api.jquery.com/animate/" rel="nofollow noreferrer">http://api.jquery.com/animate/</a>). With this, you can change the duration of the animation or have a callback function executed when the scrolling is complete. This only works if <code>options.instant</code> is set to false. If you need to have an instant animation but with a callback, set <code>options.animationOptions.duration = 0</code> instead of using <code>options.instant = true</code>.

I have an HTML document with images in a grid format using <code>&lt;ul&gt;&lt;li&gt;&lt;img...</code>. The browser window has both vertical &amp; horizontal scrolling. 

Question: 
When I click on an image <code>&lt;img&gt;</code>, how then do I get the whole document to scroll to a position where the image I just clicked on is <code>top:20px; left:20px</code> ?

I've had a browse on here for similar posts...although I'm quite new to JavaScript, and want to understand how this is achieved for myself.

How do I get an element to scroll into view, using jQuery?

jQuery

我有一个超文本标记语言文档，其中包含使用<ul><li><img...的网格格式的图像。浏览器窗口具有垂直和水平滚动。问题：当我单击图像<img>时，如何让整个文档滚动到我刚刚单击的图像是top:20px; left:20px的位置？我在这里浏览了一下类似的posts...although。我是JavaScript的新...

问如何使用jQuery让元素滚动到视图中？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery让元素滚动到视图中？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery让元素滚动到视图中？
EN