blocks|key|994771|text|function+scrollTo(hash)+{
++++location.hash+=+"#"+%2B+hash;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|994772|根本不需要jQuery！|unstyled|994773|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>function scrollTo(hash) {
 location.hash = "#" + hash;
}
</code></pre>

No jQuery required at all!

blocks|key|994792|text|更简单的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|994793|var+element_to_scroll_to+=+document.getElementById('anchorName2');
//+Or:
var+element_to_scroll_to+=+document.querySelectorAll('.my-element-class')[0];
//+Or:
var+element_to_scroll_to+=+$('.my-element-class')[0];
//+Basically+`element_to_scroll_to`+just+have+to+be+a+reference
//+to+any+DOM+element+present+on+the+page
//+Then:
element_to_scroll_to.scrollIntoView();|code-block|syntax|javascript|994794|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|$]]

Way simpler:

<pre><code>var element_to_scroll_to = document.getElementById('anchorName2');
// Or:
var element_to_scroll_to = document.querySelectorAll('.my-element-class')[0];
// Or:
var element_to_scroll_to = $('.my-element-class')[0];
// Basically `element_to_scroll_to` just have to be a reference
// to any DOM element present on the page
// Then:
element_to_scroll_to.scrollIntoView();
</code></pre>

blocks|key|1209051|text|您可以使用jQuery的.animate()、.offset()和scrollTop。喜欢|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1209052|$(document.body).animate({
++++'scrollTop':+++$('#anchorName2').offset().top
},+2000);|code-block|syntax|javascript|1209053|链接示例：http://jsbin.com/unasi3/edit|1209054|如果不想设置动画，请使用.scrollTop()，如下所示：|1209055|$(document.body).scrollTop($('#anchorName2').offset().top);|1209056|或者JavaScript的原生location.hash，比如：|1209057|location.hash+=+'#'+%2B+anchorid;|1209058|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/animate/|1|http://api.jquery.com/offset/|2|http://jsbin.com/unasi3/edit|3|http://api.jquery.com/scrollTop/^0|X|9|C|A|0|N|9|1|0|0|5|S|2|0|C|C|3|0|0|F|D|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@$9|1B|A|1C|1|1D]|$9|1E|A|1F|1|1G]]|E|$]]|$1|F|3|G|5|H|7|1H|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1I|8|@]|D|@$9|1J|A|1K|1|1L]]|E|$]]|$1|M|3|N|5|6|7|1M|8|@]|D|@$9|1N|A|1O|1|1P]]|E|$]]|$1|O|3|P|5|H|7|1Q|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|6|7|1R|8|@$9|1S|A|1T|B|C]]|D|@]|E|$]]|$1|S|3|T|5|H|7|1U|8|@]|D|@]|E|$I|J]]|$1|U|3|-4|5|6|7|1V|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]|12|$5|X|Y|Z|E|$10|13]]|14|$5|X|Y|Z|E|$10|15]]|16|$5|X|Y|Z|E|$10|17]]]]

You can use jQuery's <a href="http://api.jquery.com/animate/" rel="nofollow noreferrer">.animate()</a>, <a href="http://api.jquery.com/offset/" rel="nofollow noreferrer">.offset()</a> and <code>scrollTop</code>. Like
<pre><code>$(document.body).animate({
 'scrollTop': $('#anchorName2').offset().top
}, 2000);
</code></pre>
Example link: <a href="http://jsbin.com/unasi3/edit" rel="nofollow noreferrer">http://jsbin.com/unasi3/edit</a>
If you don't want to animate, use <a href="http://api.jquery.com/scrollTop/" rel="nofollow noreferrer">.scrollTop()</a> like:
<pre><code>$(document.body).scrollTop($('#anchorName2').offset().top);
</code></pre>
Or JavaScript's native <code>location.hash</code> like:
<pre><code>location.hash = '#' + anchorid;
</code></pre>

blocks|key|1209139|text|很棒的solution+by+jAndy，但是平滑的滚动似乎在火狐中有问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1209140|以这种方式编写在Firefox中也有效。|1209141|(function($)+{
++++$(document).ready(function()+{
+++++++++$('html,+body').animate({
+++++++++++'scrollTop':+++$('#anchorName2').offset().top
+++++++++},+2000);
++++});
})(jQuery);|code-block|syntax|javascript|1209142|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/3163615/how-to-scroll-an-html-page-to-a-given-anchor/3163626#3163626^0|3|H|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

Great <a href="https://stackoverflow.com/questions/3163615/how-to-scroll-an-html-page-to-a-given-anchor/3163626#3163626">solution by jAndy</a>, but the smooth scroll seems to be having issues working in Firefox.
Writing it this way works in Firefox as well.
<pre><code>(function($) {
 $(document).ready(function() {
 $('html, body').animate({
 'scrollTop': $('#anchorName2').offset().top
 }, 2000);
 });
})(jQuery);
</code></pre>

blocks|key|994909|text|这是一个没有jQuery的纯JavaScript解决方案。它在Chrome和It浏览器上进行了测试，但没有在iOS上进行测试。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|994910|function+ScrollTo(name)+{
++ScrollToResolver(document.getElementById(name));
}

function+ScrollToResolver(elem)+{
++var+jump+=+parseInt(elem.getBoundingClientRect().top+*+.2);
++document.body.scrollTop+%2B=+jump;
++document.documentElement.scrollTop+%2B=+jump;
++if+(!elem.lastjump+%7C%7C+elem.lastjump+>+Math.abs(jump))+{
++++elem.lastjump+=+Math.abs(jump);
++++setTimeout(function()+{+ScrollToResolver(elem);},+"100");
++}+else+{
++++elem.lastjump+=+null;
++}
}|code-block|syntax|javascript|994911|演示：https://jsfiddle.net/jd7q25hg/12/|994912|entityMap|0|LINK|mutability|MUTABLE|url|https://en.wikipedia.org/wiki/IOS|1|https://jsfiddle.net/jd7q25hg/12/^0|1I|3|0|0|0|3|X|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

Here is a pure JavaScript solution without jQuery. It was tested on Chrome and Internet Explorer, but not tested on <a href="https://en.wikipedia.org/wiki/IOS" rel="nofollow noreferrer">iOS</a>.
<pre><code>function ScrollTo(name) {
 ScrollToResolver(document.getElementById(name));
}

function ScrollToResolver(elem) {
 var jump = parseInt(elem.getBoundingClientRect().top * .2);
 document.body.scrollTop += jump;
 document.documentElement.scrollTop += jump;
 if (!elem.lastjump || elem.lastjump &gt; Math.abs(jump)) {
 elem.lastjump = Math.abs(jump);
 setTimeout(function() { ScrollToResolver(elem);}, &quot;100&quot;);
 } else {
 elem.lastjump = null;
 }
}
</code></pre>
Demo: <a href="https://jsfiddle.net/jd7q25hg/12/" rel="nofollow noreferrer">https://jsfiddle.net/jd7q25hg/12/</a>

blocks|key|1209292|text|在2018年，你不需要jQuery来做这样简单的事情。内置的scrollIntoView()方法支持"behavior“属性以平滑地滚动到页面上的任何元素。您甚至可以使用散列更新浏览器URL，使其成为可加书签的浏览器。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1209293|在this+tutorial+on+scrolling+HTML+Bookmarks中，这里有一个本机方法，可以自动为页面上的所有锚点链接添加平滑滚动：|1209294|let+anchorlinks+=+document.querySelectorAll('a[href%5E="#"]')
 
for+(let+item+of+anchorlinks)+{+//+relitere+
    item.addEventListener('click',+(e)=>+{
        let+hashval+=+item.getAttribute('href')
        let+target+=+document.querySelector(hashval)
        target.scrollIntoView({
            behavior:+'smooth',
            block:+'start'
        })
        history.pushState(null,+null,+hashval)
        e.preventDefault()
    })
}|code-block|syntax|javascript|1209295|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView|1|http://www.javascriptkit.com/javatutors/scrolling-html-bookmark-javascript.shtml^0|U|G|1F|8|U|G|0|0|1|15|1|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@$9|15|A|16|1|17]]|E|$]]|$1|H|3|I|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]|U|$5|P|Q|R|E|$S|V]]]]

In 2018, you don't need jQuery for something simple like this. The built in <a href="https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView" rel="noreferrer"><code>scrollIntoView()</code></a> method supports a "<code>behavior</code>" property to smoothly scroll to any element on the page. You can even update the browser URL with a hash to make it bookmarkable.

From <a href="http://www.javascriptkit.com/javatutors/scrolling-html-bookmark-javascript.shtml" rel="noreferrer">this tutorial on scrolling HTML Bookmarks</a>, here is a native way to add smooth scrolling to all anchor links on your page automatically:

<pre><code>let anchorlinks = document.querySelectorAll('a[href^="#"]')
 
for (let item of anchorlinks) { // relitere 
    item.addEventListener('click', (e)=&gt; {
        let hashval = item.getAttribute('href')
        let target = document.querySelector(hashval)
        target.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        })
        history.pushState(null, null, hashval)
        e.preventDefault()
    })
}
</code></pre>

blocks|key|994798|text|$(document).ready+->
++$("a[href%5E='#']").click+->
++++$(document.body).animate
++++++scrollTop:+$($(this).attr("href")).offset().top,+1000|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|994799|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$(document).ready -&gt;
 $("a[href^='#']").click -&gt;
 $(document.body).animate
 scrollTop: $($(this).attr("href")).offset().top, 1000
</code></pre>

blocks|key|994990|text|这是可行的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|994991|$('.scroll').on("click",+function(e)+{

++e.preventDefault();

++var+dest+=+$(this).attr("href");

++$("html,+body").animate({

++++'scrollTop':+++$(dest).offset().top

++},+2000);

});|code-block|syntax|javascript|994992|https://jsfiddle.net/68pnkfgd/|offset|length|994993|只需添加类'scroll‘到任何你想要动画的链接|994994|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|U|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@]|9|@$I|W|J|X|1|Y]]|A|$]]|$1|K|3|L|5|6|7|Z|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|H]]]]

This works: 

<pre><code>$('.scroll').on("click", function(e) {

 e.preventDefault();

 var dest = $(this).attr("href");

 $("html, body").animate({

 'scrollTop': $(dest).offset().top

 }, 2000);

});
</code></pre>

<a href="https://jsfiddle.net/68pnkfgd/" rel="nofollow noreferrer">https://jsfiddle.net/68pnkfgd/</a>

Just add the class 'scroll' to any links you wish to animate

blocks|key|1209250|text|这是一个可以将页面滚动到锚点的工作脚本。要设置它，只需给锚链接一个id，该id与您想要滚动到的锚的name属性相匹配。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1209251|<script>
++++jQuery(document).ready(function+($){
++++++++$('a').click(function+(){
++++++++++++var+id+=+$(this).attr('id');
++++++++++++console.log(id);
++++++++++++if+(+id+==+'cet'+%7C%7C+id+==+'protein'+)+{
++++++++++++++++$('html,+body').animate({+scrollTop:+$('[name="'+%2B+id+%2B+'"]').offset().top},+'slow');
++++++++++++}
++++++++});
++++});
</script>|code-block|syntax|javascript|1209252|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 is a working script that will scroll the page to the anchor.
To set it up, just give the anchor link an id that matches the name attribute of the anchor that you want to scroll to.
<pre><code>&lt;script&gt;
 jQuery(document).ready(function ($){
 $('a').click(function (){
 var id = $(this).attr('id');
 console.log(id);
 if ( id == 'cet' || id == 'protein' ) {
 $('html, body').animate({ scrollTop: $('[name=&quot;' + id + '&quot;]').offset().top}, 'slow');
 }
 });
 });
&lt;/script&gt;
</code></pre>

blocks|key|1209339|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1209340|jQuery("a[href%5E='#']").click(function(){
++++jQuery('html,+body').animate({
++++++++scrollTop:+jQuery(+jQuery(this).attr('href')+).offset().top
++++},+1000);
++++return+false;
});|code-block|syntax|javascript|1209341|1209342|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery("a[href^='#']").click(function(){
 jQuery('html, body').animate({
 scrollTop: jQuery( jQuery(this).attr('href') ).offset().top
 }, 1000);
 return false;
});</code></pre>
</div>
</div>

blocks|key|1209160|text|我找到了一个简单易用的jQuery+solution+on+CSS-Tricks。这就是我现在使用的。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1209161|$(function()+{
++$('a[href*=#]:not([href=#])').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']');
++++++if+(target.length)+{
++++++++$('html,body').animate({
++++++++++scrollTop:+target.offset().top
++++++++},+1000);
++++++++return+false;
++++++}
++++}
++});
});|code-block|syntax|javascript|1209162|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/snippets/jquery/smooth-scrolling/^0|B|T|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

I found an easy and simple <a href="http://css-tricks.com/snippets/jquery/smooth-scrolling/" rel="nofollow noreferrer">jQuery solution on CSS-Tricks</a>. That's the one I'm using now.
<pre><code>$(function() {
 $('a[href*=#]:not([href=#])').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) +']');
 if (target.length) {
 $('html,body').animate({
 scrollTop: target.offset().top
 }, 1000);
 return false;
 }
 }
 });
});
</code></pre>

blocks|key|995050|text|Vue.js+2解决方案...添加一个简单的数据属性来简单地强制更新：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|995051|++const+app+=+new+Vue({
++...

++,+updated:+function()+{
+++++++++++this.$nextTick(function()+{
+++++++++++var+uri+=+window.location.href
+++++++++++var+anchor+=+(+uri.indexOf('#')+===+-1+)+?+''+:+uri.split('#')[1]
+++++++++++if+(+String(anchor).length+>+0+&&+this.updater+===+'page_load'+)+{
++++++++++++++this.updater+=+""+//+only+on+page-load+!
++++++++++++++location.href+=+"#"%2BString(anchor)
+++++++++++}
+++++++++})
++++++++}
+++++});
+++++app.updater+=+"page_load"

+/*+Smooth+scrolling+in+CSS+-+it+works+in+HTML5+only+*/
+html,+body+{
+++++scroll-behavior:+smooth;
+}|code-block|syntax|javascript|995052|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|$]]

A Vue.js 2 solution ... add a simple data property to simply force the update:
<pre><code> const app = new Vue({
 ...

 , updated: function() {
 this.$nextTick(function() {
 var uri = window.location.href
 var anchor = ( uri.indexOf('#') === -1 ) ? '' : uri.split('#')[1]
 if ( String(anchor).length &gt; 0 &amp;&amp; this.updater === 'page_load' ) {
 this.updater = &quot;&quot; // only on page-load !
 location.href = &quot;#&quot;+String(anchor)
 }
 })
 }
 });
 app.updater = &quot;page_load&quot;

 /* Smooth scrolling in CSS - it works in HTML5 only */
 html, body {
 scroll-behavior: smooth;
 }
</code></pre>

I’d like to make the browser to scroll the page to a given anchor, just by using JavaScript.
I have specified a <code>name</code> or <code>id</code> attribute in my HTML code:
<pre><code> &lt;a name=&quot;anchorName&quot;&gt;..&lt;/a&gt;
</code></pre>
or
<pre><code> &lt;h1 id=&quot;anchorName2&quot;&gt;..&lt;/h1&gt;
</code></pre>
I’d like to get the same effect as you’d get by navigating to <code>http://server.com/path#anchorName</code>. The page should be scrolled so that the anchor is near the top of the visible part of the page.

How to scroll an HTML page to a given anchor

我想让浏览器将页面滚动到给定的锚点，只需使用JavaScript即可。我在HTML代码中指定了name或id属性： <a name="anchorName">..</a>或 <h1 id="anchorName2">..</h1>我希望获得与您导航到http://server.com/path#anchorName相同的效果。应该滚动页面，使锚点位于页面可见部分的顶部附近。

问如何将HTML页面滚动到给定的锚点
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将HTML页面滚动到给定的锚点EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将HTML页面滚动到给定的锚点
EN