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|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|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|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|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|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|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|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|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|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|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

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

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

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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