blocks|key|4097912|text|要在一段精确的时间内滚动到某个位置，可以使用window.requestAnimationFrame，每次计算相应的当前位置。当不支持requestAnimationFrame时，可以使用setTimeout来达到类似的效果。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4097913|/*
+++@param+pos:+the+y-position+to+scroll+to+(in+pixels)
+++@param+time:+the+exact+amount+of+time+the+scrolling+will+take+(in+milliseconds)
*/
function+scrollToSmoothly(pos,+time)+{
++++var+currentPos+=+window.pageYOffset;
++++var+start+=+null;
++++if(time+==+null)+time+=+500;
++++pos+=+%2Bpos,+time+=+%2Btime;
++++window.requestAnimationFrame(function+step(currentTime)+{
++++++++start+=+!start+?+currentTime+:+start;
++++++++var+progress+=+currentTime+-+start;
++++++++if+(currentPos+<+pos)+{
++++++++++++window.scrollTo(0,+((pos+-+currentPos)+*+progress+/+time)+%2B+currentPos);
++++++++}+else+{
++++++++++++window.scrollTo(0,+currentPos+-+((currentPos+-+pos)+*+progress+/+time));
++++++++}
++++++++if+(progress+<+time)+{
++++++++++++window.requestAnimationFrame(step);
++++++++}+else+{
++++++++++++window.scrollTo(0,+pos);
++++++++}
++++});
}|code-block|syntax|javascript|4097914|演示：|4097915|​|4097916|/*
+++@param+time:+the+exact+amount+of+time+the+scrolling+will+take+(in+milliseconds)
+++@param+pos:+the+y-position+to+scroll+to+(in+pixels)
*/
function+scrollToSmoothly(pos,+time)+{
++++var+currentPos+=+window.pageYOffset;
++++var+start+=+null;
++++if(time+==+null)+time+=+500;
++++pos+=+%2Bpos,+time+=+%2Btime;
++++window.requestAnimationFrame(function+step(currentTime)+{
++++++++start+=+!start+?+currentTime+:+start;
++++++++var+progress+=+currentTime+-+start;
++++++++if+(currentPos+<+pos)+{
++++++++++++window.scrollTo(0,+((pos+-+currentPos)+*+progress+/+time)+%2B+currentPos);
++++++++}+else+{
++++++++++++window.scrollTo(0,+currentPos+-+((currentPos+-+pos)+*+progress+/+time));
++++++++}
++++++++if+(progress+<+time)+{
++++++++++++window.requestAnimationFrame(step);
++++++++}+else+{
++++++++++++window.scrollTo(0,+pos);
++++++++}
++++});
}|4097917|<button+onClick="scrollToSmoothly(document.querySelector('div').offsetTop,+300)">
Scroll+To+Div+(300ms)
</button>
<button+onClick="scrollToSmoothly(document.querySelector('div').offsetTop,+200)">
Scroll+To+Div+(200ms)
</button>
<button+onClick="scrollToSmoothly(document.querySelector('div').offsetTop,+100)">
Scroll+To+Div+(100ms)
</button>
<button+onClick="scrollToSmoothly(document.querySelector('div').offsetTop,+50)">
Scroll+To+Div+(50ms)
</button>
<button+onClick="scrollToSmoothly(document.querySelector('div').offsetTop,+1000)">
Scroll+To+Div+(1000ms)
</button>
<div+style="margin:+500px+0px;">
DIV<p/>
<button+onClick="scrollToSmoothly(0,+500)">
Back+To+Top
</button>
<button+onClick="scrollToSmoothly(document.body.scrollHeight)">
Scroll+To+Bottom
</button>
</div>
<div+style="margin:+500px+0px;">
</div>
<button+style="margin-top:+100px;"+onClick="scrollToSmoothly(500,+3000)">
Scroll+To+y-position+500px+(3000ms)
</button>|4097918|4097919|对于更复杂的情况，可以使用SmoothScroll.js+library，它可以处理垂直和水平平滑滚动、在其他容器元素内滚动、不同的缓动行为、从当前位置相对滚动等。|4097920|4097921|var+easings+=+document.getElementById("easings");
for(var+key+in+smoothScroll.easing){
++++if(smoothScroll.easing.hasOwnProperty(key)){
++++++++var+option+=+document.createElement('option');
++++++++option.text+=+option.value+=+key;
++++++++easings.add(option);
++++}
}
document.getElementById('to-bottom').addEventListener('click',+function(e){
++++smoothScroll({yPos:+'end',+easing:+easings.value,+duration:+2000});
});
document.getElementById('to-top').addEventListener('click',+function(e){
++++smoothScroll({yPos:+'start',+easing:+easings.value,+duration:+2000});
});|4097922|<script+src="https://cdn.jsdelivr.net/gh/LieutenantPeacock/SmoothScroll@1.2.0/src/smoothscroll.min.js"+integrity="sha384-UdJHYJK9eDBy7vML0TvJGlCpvrJhCuOPGTc7tHbA%2BjHEgCgjWpPbmMvmd/2bzdXU"+crossorigin="anonymous"></script>

Easing:+<select+id="easings"></select>
<button+id="to-bottom">Scroll+To+Bottom</button>
<br>
<button+id="to-top"+style="margin-top:+5000px;">Scroll+To+Top</button>|4097923|4097924|或者，可以将options对象传递给window.scroll和window.scrollBy，前者滚动到特定的x和y位置，后者从当前位置滚动一定数量：|4097925|//+Scroll+to+specific+values
//+scrollTo+is+the+same
window.scroll({
++top:+2500,+
++left:+0,+
++behavior:+'smooth'+
});

//+Scroll+certain+amounts+from+current+position+
window.scrollBy({+
++top:+100,+//+could+be+negative+value
++left:+0,+
++behavior:+'smooth'+
});|4097926|4097927|4097928|<button+onClick="scrollToDiv()">Scroll+To+Element</button>
<div+style="margin:+500px+0px;">Div</div>
<script>
function+scrollToDiv(){
var+elem+=+document.querySelector("div");
window.scroll({
++++++top:+elem.offsetTop,+
++++++left:+0,+
++++++behavior:+'smooth'+
});
}
</script>|4097929|4097930|如果只需要滚动到某个元素，而不需要滚动到文档中的特定位置，则可以使用Element.scrollIntoView，并将behavior设置为smooth。|4097931|document.getElementById("elemID").scrollIntoView({+
++behavior:+'smooth'+
});|4097932|4097933|4097934|<button+onClick="scrollToDiv()">Scroll+To+Element</button>
<div+id="myDiv"+style="margin:+500px+0px;">Div</div>
<script>
function+scrollToDiv(){
++++document.getElementById("myDiv").scrollIntoView({+
++++++behavior:+'smooth'+
+++});
}
</script>|4097935|4097936|现代浏览器支持scroll-behavior+CSS+property，它可用于使文档中的滚动变得平滑(不需要JavaScript)。锚标签可以通过给锚标签一个#的href加上要滚动到的元素的id+)来实现这一点。您还可以为特定容器(如div+)设置scroll-behavior属性，以使其内容平滑滚动。|4097937|4097938|4097939|html,+body{
++scroll-behavior:+smooth;
}
a,+a:visited{
++color:+initial;
}|4097940|<a+href="#elem">Scroll+To+Element</a>
<div+id="elem"+style="margin:+500px+0px;">Div</div>|4097941|4097942|在使用JavaScript时，CSS+scroll-behavior属性也适用于window.scrollTo。|4097943|4097944|4097945|html,+body{
++scroll-behavior:+smooth;
}|4097946|<button+onClick="scrollToDiv()">Scroll+To+Element</button>
<div+style="margin:+500px+0px;">Div</div>
<script>
function+scrollToDiv(){
++var+elem+=+document.querySelector("div");
++window.scrollTo(0,+elem.offsetTop);
}
</script>|4097947|4097948|若要检查是否支持scroll-behavior属性，可以检查它是否作为HTML元素的样式中的键存在。|4097949|4097950|var+scrollBehaviorSupported+=+'scroll-behavior'+in+document.documentElement.style;
console.log('scroll-behavior+supported:',+scrollBehaviorSupported);|4097951|4097952|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame|1|https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout|2|https://github.com/LieutenantPeacock/SmoothScroll|3|https://developer.mozilla.org/en-US/docs/Web/API/window/scroll|4|https://developer.mozilla.org/en-US/docs/Web/API/window/scrollBy|5|https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView|6|https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior^0|M|S|1V|L|2M|A|M|S|0|2M|A|1|0|0|0|0|0|0|0|D|N|2|0|0|0|0|0|I|D|W|F|I|D|3|W|F|4|0|0|0|0|0|0|Y|M|1N|8|1Y|6|Y|M|5|0|0|0|0|0|0|7|F|28|1|2A|4|2O|2|3A|3|3H|F|7|S|6|0|0|0|0|0|0|J|F|14|F|0|0|0|0|0|0|8|F|0|0|0|0^^$0|@$1|2|3|4|5|6|7|2R|8|@$9|2S|A|2T|B|C]|$9|2U|A|2V|B|C]|$9|2W|A|2X|B|C]]|D|@$9|2Y|A|2Z|1|30]|$9|31|A|32|1|33]]|E|$]]|$1|F|3|G|5|H|7|34|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|35|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|36|8|@]|D|@]|E|$]]|$1|O|3|P|5|H|7|37|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|H|7|38|8|@]|D|@]|E|$I|J]]|$1|S|3|N|5|6|7|39|8|@]|D|@]|E|$]]|$1|T|3|U|5|6|7|3A|8|@]|D|@$9|3B|A|3C|1|3D]]|E|$]]|$1|V|3|N|5|6|7|3E|8|@]|D|@]|E|$]]|$1|W|3|X|5|H|7|3F|8|@]|D|@]|E|$I|J]]|$1|Y|3|Z|5|H|7|3G|8|@]|D|@]|E|$I|J]]|$1|10|3|N|5|6|7|3H|8|@]|D|@]|E|$]]|$1|11|3|12|5|6|7|3I|8|@$9|3J|A|3K|B|C]|$9|3L|A|3M|B|C]]|D|@$9|3N|A|3O|1|3P]|$9|3Q|A|3R|1|3S]]|E|$]]|$1|13|3|14|5|H|7|3T|8|@]|D|@]|E|$I|J]]|$1|15|3|L|5|6|7|3U|8|@]|D|@]|E|$]]|$1|16|3|N|5|6|7|3V|8|@]|D|@]|E|$]]|$1|17|3|18|5|H|7|3W|8|@]|D|@]|E|$I|J]]|$1|19|3|N|5|6|7|3X|8|@]|D|@]|E|$]]|$1|1A|3|1B|5|6|7|3Y|8|@$9|3Z|A|40|B|C]|$9|41|A|42|B|C]|$9|43|A|44|B|C]]|D|@$9|45|A|46|1|47]]|E|$]]|$1|1C|3|1D|5|H|7|48|8|@]|D|@]|E|$I|J]]|$1|1E|3|L|5|6|7|49|8|@]|D|@]|E|$]]|$1|1F|3|N|5|6|7|4A|8|@]|D|@]|E|$]]|$1|1G|3|1H|5|H|7|4B|8|@]|D|@]|E|$I|J]]|$1|1I|3|N|5|6|7|4C|8|@]|D|@]|E|$]]|$1|1J|3|1K|5|6|7|4D|8|@$9|4E|A|4F|B|C]|$9|4G|A|4H|B|C]|$9|4I|A|4J|B|C]|$9|4K|A|4L|B|C]|$9|4M|A|4N|B|C]|$9|4O|A|4P|B|C]]|D|@$9|4Q|A|4R|1|4S]]|E|$]]|$1|1L|3|L|5|6|7|4T|8|@]|D|@]|E|$]]|$1|1M|3|N|5|6|7|4U|8|@]|D|@]|E|$]]|$1|1N|3|1O|5|H|7|4V|8|@]|D|@]|E|$I|J]]|$1|1P|3|1Q|5|H|7|4W|8|@]|D|@]|E|$I|J]]|$1|1R|3|N|5|6|7|4X|8|@]|D|@]|E|$]]|$1|1S|3|1T|5|6|7|4Y|8|@$9|4Z|A|50|B|C]|$9|51|A|52|B|C]]|D|@]|E|$]]|$1|1U|3|L|5|6|7|53|8|@]|D|@]|E|$]]|$1|1V|3|N|5|6|7|54|8|@]|D|@]|E|$]]|$1|1W|3|1X|5|H|7|55|8|@]|D|@]|E|$I|J]]|$1|1Y|3|1Z|5|H|7|56|8|@]|D|@]|E|$I|J]]|$1|20|3|N|5|6|7|57|8|@]|D|@]|E|$]]|$1|21|3|22|5|6|7|58|8|@$9|59|A|5A|B|C]]|D|@]|E|$]]|$1|23|3|N|5|6|7|5B|8|@]|D|@]|E|$]]|$1|24|3|25|5|H|7|5C|8|@]|D|@]|E|$I|J]]|$1|26|3|N|5|6|7|5D|8|@]|D|@]|E|$]]|$1|27|3|-4|5|6|7|5E|8|@]|D|@]|E|$]]]|28|$29|$5|2A|2B|2C|E|$2D|2E]]|2F|$5|2A|2B|2C|E|$2D|2G]]|2H|$5|2A|2B|2C|E|$2D|2I]]|2J|$5|2A|2B|2C|E|$2D|2K]]|2L|$5|2A|2B|2C|E|$2D|2M]]|2N|$5|2A|2B|2C|E|$2D|2O]]|2P|$5|2A|2B|2C|E|$2D|2Q]]]]

<p>To scroll to a certain position in an exact amount of time, <a href="https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame" rel="nofollow noreferrer"><code>window.requestAnimationFrame</code></a> can be put to use, calculating the appropriate current position each time. <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout" rel="nofollow noreferrer"><code>setTimeout</code></a> can be used to a similar effect when <code>requestAnimationFrame</code> is not supported.</p>
<pre class="lang-js prettyprint-override"><code>/*
   @param pos: the y-position to scroll to (in pixels)
   @param time: the exact amount of time the scrolling will take (in milliseconds)
*/
function scrollToSmoothly(pos, time) {
    var currentPos = window.pageYOffset;
    var start = null;
    if(time == null) time = 500;
    pos = +pos, time = +time;
    window.requestAnimationFrame(function step(currentTime) {
        start = !start ? currentTime : start;
        var progress = currentTime - start;
        if (currentPos &lt; pos) {
            window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
        } else {
            window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
        }
        if (progress &lt; time) {
            window.requestAnimationFrame(step);
        } else {
            window.scrollTo(0, pos);
        }
    });
}
</code></pre>
<p>Demo:</p>
<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>/*
   @param time: the exact amount of time the scrolling will take (in milliseconds)
   @param pos: the y-position to scroll to (in pixels)
*/
function scrollToSmoothly(pos, time) {
    var currentPos = window.pageYOffset;
    var start = null;
    if(time == null) time = 500;
    pos = +pos, time = +time;
    window.requestAnimationFrame(function step(currentTime) {
        start = !start ? currentTime : start;
        var progress = currentTime - start;
        if (currentPos &lt; pos) {
            window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
        } else {
            window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
        }
        if (progress &lt; time) {
            window.requestAnimationFrame(step);
        } else {
            window.scrollTo(0, pos);
        }
    });
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onClick="scrollToSmoothly(document.querySelector('div').offsetTop, 300)"&gt;
Scroll To Div (300ms)
&lt;/button&gt;
&lt;button onClick="scrollToSmoothly(document.querySelector('div').offsetTop, 200)"&gt;
Scroll To Div (200ms)
&lt;/button&gt;
&lt;button onClick="scrollToSmoothly(document.querySelector('div').offsetTop, 100)"&gt;
Scroll To Div (100ms)
&lt;/button&gt;
&lt;button onClick="scrollToSmoothly(document.querySelector('div').offsetTop, 50)"&gt;
Scroll To Div (50ms)
&lt;/button&gt;
&lt;button onClick="scrollToSmoothly(document.querySelector('div').offsetTop, 1000)"&gt;
Scroll To Div (1000ms)
&lt;/button&gt;
&lt;div style="margin: 500px 0px;"&gt;
DIV&lt;p/&gt;
&lt;button onClick="scrollToSmoothly(0, 500)"&gt;
Back To Top
&lt;/button&gt;
&lt;button onClick="scrollToSmoothly(document.body.scrollHeight)"&gt;
Scroll To Bottom
&lt;/button&gt;
&lt;/div&gt;
&lt;div style="margin: 500px 0px;"&gt;
&lt;/div&gt;
&lt;button style="margin-top: 100px;" onClick="scrollToSmoothly(500, 3000)"&gt;
Scroll To y-position 500px (3000ms)
&lt;/button&gt;</code></pre>
</div>
</div>
</p>
<p>For more complex cases, the <a href="https://github.com/LieutenantPeacock/SmoothScroll" rel="nofollow noreferrer">SmoothScroll.js library</a> can be used, which handles smooth scrolling both vertically and horizontally, scrolling inside other container elements, different easing behaviors, scrolling relatively from the current position, and more.</p>
<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var easings = document.getElementById("easings");
for(var key in smoothScroll.easing){
    if(smoothScroll.easing.hasOwnProperty(key)){
        var option = document.createElement('option');
        option.text = option.value = key;
        easings.add(option);
    }
}
document.getElementById('to-bottom').addEventListener('click', function(e){
    smoothScroll({yPos: 'end', easing: easings.value, duration: 2000});
});
document.getElementById('to-top').addEventListener('click', function(e){
    smoothScroll({yPos: 'start', easing: easings.value, duration: 2000});
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/gh/LieutenantPeacock/SmoothScroll@1.2.0/src/smoothscroll.min.js" integrity="sha384-UdJHYJK9eDBy7vML0TvJGlCpvrJhCuOPGTc7tHbA+jHEgCgjWpPbmMvmd/2bzdXU" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;!-- Taken from one of the library examples --&gt;
Easing: &lt;select id="easings"&gt;&lt;/select&gt;
&lt;button id="to-bottom"&gt;Scroll To Bottom&lt;/button&gt;
&lt;br&gt;
&lt;button id="to-top" style="margin-top: 5000px;"&gt;Scroll To Top&lt;/button&gt;</code></pre>
</div>
</div>
</p>
<p>Alternatively, you can pass an options object to <a href="https://developer.mozilla.org/en-US/docs/Web/API/window/scroll" rel="nofollow noreferrer"><code>window.scroll</code></a> which scrolls to a specific x and y position and <a href="https://developer.mozilla.org/en-US/docs/Web/API/window/scrollBy" rel="nofollow noreferrer"><code>window.scrollBy</code></a> which scrolls a certain amount from the current position:</p>
<pre><code>// Scroll to specific values
// scrollTo is the same
window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth' 
});

// Scroll certain amounts from current position 
window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});
</code></pre>
<p>Demo:</p>
<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onClick="scrollToDiv()"&gt;Scroll To Element&lt;/button&gt;
&lt;div style="margin: 500px 0px;"&gt;Div&lt;/div&gt;
&lt;script&gt;
function scrollToDiv(){
var elem = document.querySelector("div");
window.scroll({
      top: elem.offsetTop, 
      left: 0, 
      behavior: 'smooth' 
});
}
&lt;/script&gt;</code></pre>
</div>
</div>
</p>
<p>If you only need to scroll to an element, not a specific position in the document, you can use <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView" rel="nofollow noreferrer"><code>Element.scrollIntoView</code></a> with <code>behavior</code> set to <code>smooth</code>.</p>
<pre><code>document.getElementById(&quot;elemID&quot;).scrollIntoView({ 
  behavior: 'smooth' 
});
</code></pre>
<p>Demo:</p>
<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onClick="scrollToDiv()"&gt;Scroll To Element&lt;/button&gt;
&lt;div id="myDiv" style="margin: 500px 0px;"&gt;Div&lt;/div&gt;
&lt;script&gt;
function scrollToDiv(){
    document.getElementById("myDiv").scrollIntoView({ 
      behavior: 'smooth' 
   });
}
&lt;/script&gt;</code></pre>
</div>
</div>
</p>
<p>Modern browsers support the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior" rel="nofollow noreferrer"><code>scroll-behavior</code> CSS property</a>, which can be used to make scrolling in the document smooth (without the need for JavaScript).  Anchor tags can be used for this by giving the anchor tag a <code>href</code> of <code>#</code> plus the <code>id</code> of the element to scroll to). You can also set the <code>scroll-behavior</code> property for a specific container like a <code>div</code> to make its contents scroll smoothly.</p>
<p>Demo:</p>
<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>html, body{
  scroll-behavior: smooth;
}
a, a:visited{
  color: initial;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#elem"&gt;Scroll To Element&lt;/a&gt;
&lt;div id="elem" style="margin: 500px 0px;"&gt;Div&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>The CSS <code>scroll-behavior</code> property works with JavaScript as well when using <code>window.scrollTo</code>.</p>
<p>Demo:</p>
<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>html, body{
  scroll-behavior: smooth;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onClick="scrollToDiv()"&gt;Scroll To Element&lt;/button&gt;
&lt;div style="margin: 500px 0px;"&gt;Div&lt;/div&gt;
&lt;script&gt;
function scrollToDiv(){
  var elem = document.querySelector("div");
  window.scrollTo(0, elem.offsetTop);
}
&lt;/script&gt;</code></pre>
</div>
</div>
</p>
<p>To check if the <code>scroll-behavior</code> property is supported, you can check if it exists as a key in the style of the HTML element.</p>
<p><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>var scrollBehaviorSupported = 'scroll-behavior' in document.documentElement.style;
console.log('scroll-behavior supported:', scrollBehaviorSupported);</code></pre>
</div>
</div>
</p>


blocks|key|4096461|text|考虑使用Element.scrollIntoView()。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4096462|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView^0|4|O|4|O|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<p>Consider using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView" rel="nofollow noreferrer"><code>Element.scrollIntoView()</code></a>.</p>


blocks|key|4097998|text|正如我在评论中提到的，当您试图滚动到指定的元素时，scrollIntoView是一个很好的选择--它会得到越来越多的浏览器支持--比如您显然想要对scrollToSection函数做什么。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4097999|要滚动到页面中间，可以将body和/或html元素的scrollTop属性设置为body的scrollHeight和窗口的innerHeight之差的一半。把上面的计算和requestAnimationFrame结合起来，你就完成了。|4098000|下面是如何将上述建议合并到您的代码中：|4098001|​|4098002|function+scrollToHalf(duration)+{
++var
++++heightDiff+=+document.body.scrollHeight+-+window.innerHeight,
++++endValue+=+heightDiff+/+2,
++++start+=+null;
++++
++/*+Set+a+default+for+the+duration,+in+case+it's+not+given.+*/
++duration+=+duration+%7C%7C+300;
++
++/*+Start+the+animation.+*/
++window.requestAnimationFrame(function+step+(now)+{
++++/*+Normalise+the+start+date+and+calculate+the+current+progress.+*/
++++start+=+!start+?+now+:+start;
++++var+progress+=+now+-+start;
++++
++++/*+Increment+by+a+calculate+step+the+value+of+the+scroll+top.+*/
++++document.documentElement.scrollTop+=+endValue+*+progress+/+duration;
++++document.body.scrollTop+=+endValue+*+progress+/+duration;
++++
++++/*+Check+whether+the+current+progress+is+less+than+the+given+duration.+*/
++++if+(progress+<+duration)+{
++++++/*+Execute+the+function+recursively.+*/
++++++window.requestAnimationFrame(step);
++++}
++++else+{
++++++/*+Set+the+scroll+top+to+the+end+value.+*/
++++++document.documentElement.scrollTop+=+endValue;
++++++document.body.scrollTop+=+endValue;
++++}
++});
}

function+scrollToSection(element)+{
++/*+Scroll+until+the+button's+next+sibling+comes+into+view.+*/
++element.nextElementSibling.scrollIntoView({block:+"start",+behavior:+"smooth"});
}|code-block|syntax|javascript|4098003|#section1+{
++margin:+1000px+0;
++border:+1px+solid+red
}|4098004|<input+type="button"+onClick="scrollToHalf()"+value="Scroll+To+50%25+of+Page">
<br>
<input+type="button"+onClick="scrollToSection(this)"+value="Scroll+To+Section1">
<section+id="section1">
++This+is+a+section
</section>|4098005|4098006|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView|1|https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame^0|P|E|21|F|P|E|0|0|C|4|J|4|Q|9|19|C|1P|B|2D|L|2D|L|1|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@$9|1A|A|1B|1|1C]]|E|$]]|$1|F|3|G|5|6|7|1D|8|@$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]|$9|1M|A|1N|B|C]|$9|1O|A|1P|B|C]]|D|@$9|1Q|A|1R|1|1S]]|E|$]]|$1|H|3|I|5|6|7|1T|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|1U|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|1V|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|N|7|1W|8|@]|D|@]|E|$O|P]]|$1|S|3|T|5|N|7|1X|8|@]|D|@]|E|$O|P]]|$1|U|3|K|5|6|7|1Y|8|@]|D|@]|E|$]]|$1|V|3|-4|5|6|7|1Z|8|@]|D|@]|E|$]]]|W|$X|$5|Y|Z|10|E|$11|12]]|13|$5|Y|Z|10|E|$11|14]]]]

<p>As I mentioned in my comment, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView" rel="nofollow noreferrer"><code>scrollIntoView</code></a> is a good option to consider – that gets greater and greater browser support – when you try to scroll to a specified element such as what you are apparently trying to do with your <code>scrollToSection</code> function.</p>

<p>To scroll to the middle of the page you can set the <code>scrollTop</code> property of the <code>body</code> and/or the <code>html</code> element to half the difference of the <code>scrollHeight</code> of the body and the <code>innerHeight</code> of the window. Couple the above calculation with <a href="https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame" rel="nofollow noreferrer"><code>requestAnimationFrame</code></a> and you are set.</p>

<p>Here's how you can incorporate the above suggestions in your code:</p>

<p><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>function scrollToHalf(duration) {
  var
    heightDiff = document.body.scrollHeight - window.innerHeight,
    endValue = heightDiff / 2,
    start = null;
    
  /* Set a default for the duration, in case it's not given. */
  duration = duration || 300;
  
  /* Start the animation. */
  window.requestAnimationFrame(function step (now) {
    /* Normalise the start date and calculate the current progress. */
    start = !start ? now : start;
    var progress = now - start;
    
    /* Increment by a calculate step the value of the scroll top. */
    document.documentElement.scrollTop = endValue * progress / duration;
    document.body.scrollTop = endValue * progress / duration;
    
    /* Check whether the current progress is less than the given duration. */
    if (progress &lt; duration) {
      /* Execute the function recursively. */
      window.requestAnimationFrame(step);
    }
    else {
      /* Set the scroll top to the end value. */
      document.documentElement.scrollTop = endValue;
      document.body.scrollTop = endValue;
    }
  });
}

function scrollToSection(element) {
  /* Scroll until the button's next sibling comes into view. */
  element.nextElementSibling.scrollIntoView({block: "start", behavior: "smooth"});
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#section1 {
  margin: 1000px 0;
  border: 1px solid red
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="button" onClick="scrollToHalf()" value="Scroll To 50% of Page"&gt;
&lt;br&gt;
&lt;input type="button" onClick="scrollToSection(this)" value="Scroll To Section1"&gt;
&lt;section id="section1"&gt;
  This is a section
&lt;/section&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4098049|text|你可以滚动任何你想要的节点对象，使用一个简单的多边形填充，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4098050|Node.prototype.scroll+=+window.scroll|code-block|syntax|javascript|4098051|它将为您提供对滚动对象的相同访问权限，但对于任何DOM元素，您都可以像这样使用它：|4098052|document.querySelector('.scrollable-div').scroll({
++top:+500,+
++left:+0,+
++behavior:+'smooth'+
});|4098053|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>You can literally scroll any node object you want, with a simple polyfill like this:</p>
<pre><code>Node.prototype.scroll = window.scroll
</code></pre>
<p>it will give you same access to scroll objects, but with any DOM element, you can use it like:</p>
<pre><code>document.querySelector('.scrollable-div').scroll({
  top: 500, 
  left: 0, 
  behavior: 'smooth' 
});
</code></pre>


<p>I want to smoothly scroll to an element without using jQuery – just pure javascript. I would like a generic function to be able to both scroll down and scroll up smoothly to a specific position in the document.</p>

<p>I know I can use the following in jQuery:</p>

<pre><code>$('html, body').animate({
     scrollTop: $('#myelementid').offset().top
}, 500);
</code></pre>

<p>How would I do it with just javascript?</p>

<p>This is what I am trying to do:</p>

<p><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>function scrollToHalf(){
  //what do I do?
}
function scrollToSection(){
 //What should I do here?
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="button" onClick="scrollToHalf()" value="Scroll To 50% of Page"&gt;
    &lt;br&gt;
    &lt;input type="button" onClick="scrollToSection()" value="Scroll To Section1"&gt;
    &lt;section style="margin-top: 1000px;" id="section1"&gt;
      This is a section
&lt;/section&gt;</code></pre>
</div>
</div>
</p>

<p>In jquery I would do it like so:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>html, body{
  height: 3000px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;input type="button" onClick="scrollToHalf()" value="Scroll To 50% of Page"&gt;
&lt;br&gt;
&lt;input type="button" onClick="scrollToSection()" value="Scroll To Section1"&gt;
&lt;section style="margin-top: 1000px;" id="section1"&gt;
  This is a section
&lt;/section&gt;
&lt;script&gt;
function scrollToHalf(){
  var height = $('body').height();
	$('html, body').animate({
         scrollTop: height/2
    }, 500);
}
function scrollToSection(){
	$('html, body').animate({
         scrollTop: $('#section1').offset().top
    }, 500);
}
&lt;/script&gt;</code></pre>
</div>
</div>
</p>

<p>EDIT: I would also like to be able to smooth scroll to a certain position on the page</p>

<p>EDIT: CSS solutions are also welcome (although I would prefer javascript solutions)</p>


How to smoothly scroll to an element in pure JavaScript

容器

jQuery

我想在不使用jQuery的情况下平滑地滚动到一个元素--只使用纯javascript。我希望一个通用的功能，能够顺利地向下滚动和向上滚动到文档中的特定位置。我知道我可以在jQuery中使用以下内容：$('html, body').animate({     scrollTop: $('#myelementid').of...

问如何平滑地滚动到纯JavaScript中的元素
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何平滑地滚动到纯JavaScript中的元素EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何平滑地滚动到纯JavaScript中的元素
EN