blocks|key|1213786|text|是的，即使是在普通的JavaScript中，这也很容易。你给一个元素一个id，然后你可以用它作为“书签”：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1213787|<div+id="here">here</div>|code-block|syntax|javascript|1213788|如果你想让它在用户点击链接时滚动到那里，你可以只使用试验过的方法：|1213789|<a+href="#here">scroll+to+over+there</a>|1213790|要以编程方式完成此操作，请使用scrollIntoView()|offset|length|style|CODE|1213791|document.getElementById("here").scrollIntoView()|1213792|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/DOM/element.scrollIntoView^0|0|0|0|0|F|G|F|G|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@$M|15|N|16|O|P]]|9|@$M|17|N|18|1|19]]|A|$]]|$1|Q|3|R|5|D|7|1A|8|@]|9|@]|A|$E|F]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>Yep, even in plain JavaScript it's pretty easy. You give an element an id and then you can use that as a "bookmark":</p>

<pre><code>&lt;div id="here"&gt;here&lt;/div&gt;
</code></pre>

<p>If you want it to scroll there when a user clicks a link, you can just use the tried-and-true method:</p>

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

<p>To do it programmatically, use <a href="https://developer.mozilla.org/en/DOM/element.scrollIntoView" rel="noreferrer"><code>scrollIntoView()</code></a></p>

<pre><code>document.getElementById("here").scrollIntoView()
</code></pre>


blocks|key|1428615|text|这是一个纯javascript版本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1428616|location.hash+=+'#123';|code-block|syntax|javascript|1428617|它会自动滚动。记得添加"#“前缀。|1428618|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Here's a pure javascript version:</p>

<pre><code>location.hash = '#123';
</code></pre>

<p>It'll scroll automatically.
Remember to add the "#" prefix.</p>


blocks|key|1213858|text|不需要使用任何插件，你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1213859|var+divPosition+=+$('#divId').offset();|code-block|syntax|javascript|1213860|然后使用此命令将文档滚动到特定的DOM：|1213861|$('html,+body').animate({scrollTop:+divPosition.top},+"slow");|1213862|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|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>There is no need to use any plugin, you can do it like this:</p>

<pre><code>var divPosition = $('#divId').offset();
</code></pre>

<p>then use this to scroll document to specific DOM:</p>

<pre><code>$('html, body').animate({scrollTop: divPosition.top}, "slow");
</code></pre>


blocks|key|1428707|text|<div+id="idVal">
++++
</div>
...
<script+type="text/javascript">
+++++$(document).ready(function(){
+++++++++var+divLoc+=+$('#idVal').offset();
+++++++++$('html,+body').animate({scrollTop:+divLoc.top},+"slow");
+++++});
</script>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1428708|此示例显示定位到特定的div+id，即本例中的'idVal‘。如果您有后续的div/table将通过ajax在此页面中打开，那么您可以分配惟一的div并调用脚本滚动到div的每个内容的特定位置。|unstyled|1428709|希望这将是有用的。|1428710|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>&lt;div id="idVal"&gt;
    &lt;!--div content goes here--&gt;
&lt;/div&gt;
...
&lt;script type="text/javascript"&gt;
     $(document).ready(function(){
         var divLoc = $('#idVal').offset();
         $('html, body').animate({scrollTop: divLoc.top}, "slow");
     });
&lt;/script&gt;
</code></pre>

<p>This example shows to locate to a particular div id i.e, 'idVal' in this case. If you have subsequent divs/tables that will open up in this page via ajax, then you can assign unique divs and call the script to scroll to the particular location for each contents of divs.</p>

<p>Hope this will be useful.</p>


blocks|key|1213966|text|普通Javascript：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1213967|window.location+=+"#elementId"|code-block|syntax|javascript|1213968|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|$]]

<p>Plain Javascript:</p>

<pre><code>window.location = "#elementId"
</code></pre>


blocks|key|1213981|text|<script+type="text/javascript">
++++$(document).ready(function(){
++++++++$(".scroll-element").click(function(){
++++++++++++$('html,body').animate({
++++++++++++++++scrollTop:+$('.our_companies').offset().top
++++++++++++},+1000);

++++++++++++return+false;
++++++++});
++++})
</script>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1213982|​|unstyled|1213983|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;script type="text/javascript"&gt;
    $(document).ready(function(){
        $(".scroll-element").click(function(){
            $('html,body').animate({
                scrollTop: $('.our_companies').offset().top
            }, 1000);

            return false;
        });
    })
&lt;/script&gt;
</code></pre>

<p></p>


blocks|key|1428803|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1428804|<div+id="divRegister"></div>

$(document).ready(function()+{
location.hash+=+"divRegister";
});|code-block|syntax|javascript|1428805|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|$]]

<p>Try this</p>

<pre><code>&lt;div id="divRegister"&gt;&lt;/div&gt;

$(document).ready(function() {
location.hash = "divRegister";
});
</code></pre>


blocks|key|1428847|text|您可以使用scroll-behavior:+smooth;在不使用Javascript的情况下完成此操作|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1428848|https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior|1428849|entityMap|0|LINK|mutability|MUTABLE|url^0|5|O|0|0|1S|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@$9|S|A|T|1|U]]|E|$]]|$1|H|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|G]]]]

<p>You can use <code>scroll-behavior: smooth;</code> to get this done without Javascript</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior</a></p>


<p>Is it possible to scroll to a specific location on the page using jQuery?</p>

<p>Does the location I want to scroll to have to have:</p>

<pre><code>&lt;a name="#123"&gt;here&lt;/a&gt;
</code></pre>

<p>Or can it just move to a specific DOM id?</p>


How can I scroll to a specific location on the page using jquery?

jQuery

是否可以使用jQuery滚动到页面上的特定位置？我想要滚动到的位置是否必须具有：<a name="#123">here</a>或者它可以直接移动到特定的DOM id？

问如何使用jquery滚动到页面上的特定位置？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jquery滚动到页面上的特定位置？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jquery滚动到页面上的特定位置？
EN