blocks|key|1764421|text|老问题，但是如果有人通过google发现这个(就像我一样)，谁不想使用锚点或jquery；有一个内置的javascriptfunction可以“跳转”到一个元素；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1764422|document.getElementById('youridhere').scrollIntoView();|code-block|syntax|javascript|1764423|更好的是，根据quirksmode上强大的兼容性表，这是supported+by+all+major+browsers！|offset|length|1764424|entityMap|0|LINK|mutability|MUTABLE|url|http://www.quirksmode.org/dom/w3c_cssom.html#t23^0|0|0|S|V|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]]]]

old question, but if anyone finds this through google (as I did) and who does not want to use anchors or jquery; there's a builtin javascriptfunction to 'jump' to an element;

<pre><code>document.getElementById('youridhere').scrollIntoView();
</code></pre>

and what's even better; according to the great compatibility-tables on quirksmode, this is <a href="http://www.quirksmode.org/dom/w3c_cssom.html#t23" rel="noreferrer">supported by all major browsers</a>!

blocks|key|1764220|text|如果您不想添加额外的扩展名，下面的代码应该适用于jQuery。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1764221|$('a[href=#target]').
++++click(function(){
++++++++var+target+=+$('a[name=target]');
++++++++if+(target.length)
++++++++{
++++++++++++var+top+=+target.offset().top;
++++++++++++$('html,body').animate({scrollTop:+top},+1000);
++++++++++++return+false;
++++++++}
++++});|code-block|syntax|javascript|1764222|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|$]]

If you don't want to add an extra extension the following code should work with jQuery.

<pre><code>$('a[href=#target]').
 click(function(){
 var target = $('a[name=target]');
 if (target.length)
 {
 var top = target.offset().top;
 $('html,body').animate({scrollTop: top}, 1000);
 return false;
 }
 });
</code></pre>

blocks|key|1764062|text|JQuery+ScrollTo+-+see+this+sample+code怎么样？|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1764063|entityMap|0|LINK|mutability|MUTABLE|url|http://demos.flesler.com/jquery/scrollTo/^0|0|12|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

How about the <a href="http://demos.flesler.com/jquery/scrollTo/" rel="noreferrer">JQuery ScrollTo - see this sample code</a>

blocks|key|1549043|text|<a+href="#myAnchorALongWayDownThePage">Click+here+to+scroll</a>

<A+name='myAnchorALongWayDownThePage"></a>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1549044|没有花哨的滚动，但它应该会把你带到那里。|unstyled|1549045|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>&lt;a href="#myAnchorALongWayDownThePage"&gt;Click here to scroll&lt;/a&gt;

&lt;A name='myAnchorALongWayDownThePage"&gt;&lt;/a&gt;
</code></pre>

No fancy scrolling but it should take you there.

blocks|key|1764187|text|滚动的困难在于，您可能不仅需要滚动页面来显示div，还可能需要在可滚动的div中滚动任意数量的级别。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1764188|scrollTop属性可用于任何DOM元素，包括文档正文。通过设置它，您可以控制滚动到什么程度。您还可以使用clientHeight和scrollHeight属性来查看需要多少滚动(当clientHeight+(视区)小于scrollHeight+(内容高度)时，可以滚动。|1764189|您还可以使用offsetTop属性来确定元素在容器中的位置。|1764190|要从头开始构建一个真正通用的“滚动到视图”例程，您需要从您想要公开的节点开始，确保它位于其父节点的可见部分，然后对父节点重复相同的操作，以此类推，直到您到达顶部。|1764191|其中一个步骤看起来像这样(未测试的代码，不检查边缘情况)：|1764192|function+scrollIntoView(node)+{
++var+parent+=+node.parent;
++var+parentCHeight+=+parent.clientHeight;
++var+parentSHeight+=+parent.scrollHeight;
++if+(parentSHeight+>+parentCHeight)+{
++++var+nodeHeight+=+node.clientHeight;
++++var+nodeOffset+=+node.offsetTop;
++++var+scrollOffset+=+nodeOffset+%2B+(nodeHeight+/+2)+-+(parentCHeight+/+2);
++++parent.scrollTop+=+scrollOffset;
++}
++if+(parent.parent)+{
++++scrollIntoView(parent);
++}
}|code-block|syntax|javascript|1764193|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|V|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

The difficulty with scrolling is that you may not only need to scroll the page to show a div, but you may need to scroll inside scrollable divs on any number of levels as well.

The scrollTop property is a available on any DOM element, including the document body. By setting it, you can control how far down something is scrolled. You can also use clientHeight and scrollHeight properties to see how much scrolling is needed (scrolling is possible when clientHeight (viewport) is less than scrollHeight (the height of the content).

You can also use the offsetTop property to figure out where in the container an element is located.

To build a truly general purpose "scroll into view" routine from scratch, you would need to start at the node you want to expose, make sure it's in the visible portion of it's parent, then repeat the same for the parent, etc, all the way until you reach the top.

One step of this would look something like this (untested code, not checking edge cases):

<pre><code>function scrollIntoView(node) {
 var parent = node.parent;
 var parentCHeight = parent.clientHeight;
 var parentSHeight = parent.scrollHeight;
 if (parentSHeight &gt; parentCHeight) {
 var nodeHeight = node.clientHeight;
 var nodeOffset = node.offsetTop;
 var scrollOffset = nodeOffset + (nodeHeight / 2) - (parentCHeight / 2);
 parent.scrollTop = scrollOffset;
 }
 if (parent.parent) {
 scrollIntoView(parent);
 }
}
</code></pre>

blocks|key|1764562|text|这对我很有效|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1764563|document.getElementById('divElem').scrollIntoView();|code-block|syntax|javascript|1764564|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|$]]

This worked for me

<pre><code>document.getElementById('divElem').scrollIntoView();
</code></pre>

blocks|key|1764047|text|发布的答案here+-对您的问题的相同解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1764048|编辑:如果你想要一个平滑的滚动，JQuery的答案是非常好的-我以前还没有见过它的实际效果。|1764049|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/66964/how-do-i-create-a-link-to-a-footnote-in-html^0|5|4|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

Answer posted <a href="https://stackoverflow.com/questions/66964/how-do-i-create-a-link-to-a-footnote-in-html">here</a> - same solution to your problem.

Edit: the JQuery answer is very nice if you want a smooth scroll - I hadn't seen that in action before.

blocks|key|1763943|text|为什么不是命名锚点呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1763944|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

blocks|key|1764112|text|您需要的属性是location.hash。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1764113|++location.hash+=+'top';+//would+jump+to+named+anchor+"top|code-block|syntax|javascript|1764114|如果不使用dojo或类似的工具包，我不知道如何制作漂亮的滚动动画，但如果您只是需要它跳转到锚点，location.hash应该可以做到。|1764115|(在FF3和Safari3.1.2上测试)|1764116|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

The property you need is location.hash. For example: 
 location.hash = 'top'; //would jump to named anchor "top

I don't know how to do the nice scroll animation without the use of dojo or some toolkit like that, but if you just need it to jump to an anchor, location.hash should do it.

(tested on FF3 and Safari 3.1.2)

blocks|key|1549560|text|我不能在futtta上面的回复中添加评论，但为了更流畅地使用滚动：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1549561|onClick="document.getElementById('more').scrollIntoView({block:+'start',+behavior:+'smooth'});"|code-block|syntax|javascript|1549562|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|$]]

I can't add a comment to futtta's reply above, but for a smoother scroll use:

<pre><code>onClick="document.getElementById('more').scrollIntoView({block: 'start', behavior: 'smooth'});"
</code></pre>

blocks|key|1764595|text|<button+onClick="scrollIntoView()"></button>
 
<div+id="scroll-to"></div>


function+scrollIntoView()+{
+document.getElementById('scroll-to').scrollIntoView({
++++++behavior:+'smooth'
+});
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1764596|scrollIntoView方法接受scroll-Options来设置滚动的动画效果。|unstyled|1764597|使用平滑滚动|1764598|document.getElementById('scroll-to').scrollIntoView({
++++++++++behavior:+'smooth'
+});|1764599|无动画|1764600|document.getElementById('scroll-to').scrollIntoView();|1764601|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$B|C]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$B|C]]|$1|O|3|-4|5|F|7|W|8|@]|9|@]|A|$]]]|P|$]]

<pre><code>&lt;button onClick=&quot;scrollIntoView()&quot;&gt;&lt;/button&gt;
&lt;br&gt;
&lt;div id=&quot;scroll-to&quot;&gt;&lt;/div&gt;


function scrollIntoView() {
 document.getElementById('scroll-to').scrollIntoView({
 behavior: 'smooth'
 });
}
</code></pre>
The scrollIntoView method accepts scroll-Options to animate the scroll.
With smooth scroll
<pre><code>document.getElementById('scroll-to').scrollIntoView({
 behavior: 'smooth'
 });
</code></pre>
No animation
<pre><code>document.getElementById('scroll-to').scrollIntoView();
</code></pre>

blocks|key|1764156|text|scrollTop+(IIRC)是文档中页面顶部滚动到的位置。scrollTo滚动页面，使页面的顶部位于您指定的位置。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1764157|这里你需要的是一些Javascript操纵的样式。比方说，如果您希望div离开屏幕并从右侧滚动进来，您可以将div的left属性设置为页面的宽度，然后每隔几秒钟将其减少一次，直到它位于您想要的位置。|1764158|这应该会给你指明正确的方向。|1764159|附加:对不起，我以为你想要一个单独的div从某个地方“弹出”(有点像这个网站有时做的那样)，而不是把整个页面移到一个部分。正确地使用锚点将会达到这个效果。|1764160|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

scrollTop (IIRC) is where in the document the top of the page is scrolled to. scrollTo scrolls the page so that the top of the page is where you specify.

What you need here is some Javascript manipulated styles. Say if you wanted the div off-screen and scroll in from the right you would set the left attribute of the div to the width of the page and then decrease it by a set amount every few seconds until it is where you want.

This should point you in the right direction.

Additional: I'm sorry, I thought you wanted a separate div to 'pop out' from somewhere (sort of like this site does sometimes), and not move the entire page to a section. Proper use of anchors would achieve that effect.

blocks|key|1549494|text|为了实现平滑滚动，此代码非常有用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1549495|$('a[href*=#scrollToDivId]').click(function()+{
++++if+(location.pathname.replace(/%5E\//,'')+==+this.pathname.replace(/%5E\//,'')+&&+location.hostname+==+this.hostname)+{
++++++var+target+=+$(this.hash);
++++++target+=+target.length+?+target+:+$('[name='+%2B+this.hash.slice(1)+%2B']');
++++++var+head_height+=+$('.header').outerHeight();+//+if+page+has+any+sticky+header+get+the+header+height+else+use+0+here
++++++if+(target.length)+{
++++++++$('html,body').animate({
++++++++++scrollTop:+target.offset().top+-+head_height
++++++++},+1000);
++++++++return+false;
++++++}
++++}
++});|code-block|syntax|javascript|1549496|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|$]]

For smooth scroll this code is useful

<pre><code>$('a[href*=#scrollToDivId]').click(function() {
 if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') &amp;&amp; location.hostname == this.hostname) {
 var target = $(this.hash);
 target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
 var head_height = $('.header').outerHeight(); // if page has any sticky header get the header height else use 0 here
 if (target.length) {
 $('html,body').animate({
 scrollTop: target.offset().top - head_height
 }, 1000);
 return false;
 }
 }
 });
</code></pre>

blocks|key|1549318|text|如果我错了，请纠正我，但我一遍又一遍地读这个问题，仍然认为Angus+McCoteup问的是如何将元素设置为position:+fixed。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1549319|Angus，看看http://www.cssplay.co.uk/layouts/fixed.html+--如果你想让你的McCoteup表现得像一个菜单，看看那里的CSS吧。|offset|length|1549320|entityMap|0|LINK|mutability|MUTABLE|url|http://www.cssplay.co.uk/layouts/fixed.html^0|0|8|17|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]]]]

Correct me if I'm wrong but I'm reading the question again and again and still think that Angus McCoteup was asking how to set an element to be position: fixed. 

Angus McCoteup, check out <a href="http://www.cssplay.co.uk/layouts/fixed.html" rel="nofollow noreferrer">http://www.cssplay.co.uk/layouts/fixed.html</a> - if you want your DIV to behave like a menu there, have a look at a CSS there

I have a link on a long HTML page. When I click it, I wish a <code>div</code> on another part of the page to be visible in the window by scrolling into view.

A bit like <code>EnsureVisible</code> in other languages.

I've checked out <code>scrollTop</code> and <code>scrollTo</code> but they seem like red herrings.

Can anyone help?

JavaScript to scroll long page to DIV

容器

jQuery

我有一个很长的HTML页面上的链接。当我单击它时，我希望通过滚动到视图中，页面另一部分上的div在窗口中可见。有点像其他语言中的EnsureVisible。我已经检查过scrollTop和scrollTo了，但它们看起来像是在转移视线。有人能帮上忙吗？

问JavaScript将长页面滚动到DIV
EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript将长页面滚动到DIVEN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript将长页面滚动到DIV
EN