使用JavaScript滚动到页面顶部吗?

JavaScript

达蒙逆天Pro

2020-03-09

如何使用JavaScript滚动到页面顶部?即使滚动条立即跳到顶部也是可取的。我不是在寻找平滑的滚动。

第250篇《使用JavaScript滚动到页面顶部吗?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

15个回答
伽罗理查德 2020.03.09

激活所有浏览器。祝好运

var process;
        var delay = 50; //milisecond scroll top
        var scrollPixel = 20; //pixel U want to change after milisecond
        //Fix Undefine pageofset when using IE 8 below;
        function getPapeYOfSet() {
            var yOfSet = (typeof (window.pageYOffset) === "number") ? window.pageYOffset : document.documentElement.scrollTop;
            return yOfSet;
        }



        function backToTop() {
            process = setInterval(function () {
                var yOfSet = getPapeYOfSet();
                if (yOfSet === 0) {
                    clearInterval(process);
                } else {
                    window.scrollBy(0, -scrollPixel);
                }
            }, delay);
        }
JinJin村村 2020.03.09

You can try using JS as in this Fiddle http://jsfiddle.net/5bNmH/1/

Add the "Go to top" button in your page footer:

<footer>
    <hr />
    <p>Just some basic footer text.</p>
    <!-- Go to top Button -->
    <a href="#" class="go-top">Go Top</a>
</footer>
凯飞云 2020.03.09

None of the answers above will work in SharePoint 2016.

It has to be done like this : https://sharepoint.stackexchange.com/questions/195870/

var w = document.getElementById("s4-workspace");
w.scrollTop = 0;
米亚Stafan 2020.03.09

Non-jQuery solution / pure JavaScript:

document.body.scrollTop = document.documentElement.scrollTop = 0;
飞羽宝儿 2020.03.09

This will work:

window.scrollTo(0, 0);

Itachi理查德 2020.03.09

$(document).scrollTop(0); also works.

泡芙Sam 2020.03.09

Try this

<script>
    $(window).scrollTop(100);
</script>
米亚小哥 2020.03.09

$(".scrolltop").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});
.section{
 height:400px;
}
.section1{
  background-color: #333;
}
.section2{
  background-color: red;
}
.section3{
  background-color: yellow;
}
.section4{
  background-color: green;
}
.scrolltop{
  position:fixed;
  right:10px;
  bottom:10px;
  color:#fff;
}
<html>
<head>
<title>Scroll top demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="content-wrapper">
<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>
<div class="section section4"></div>
<a class="scrolltop">Scroll top</a>
</div>

</body>
</html>

宝儿前端 2020.03.09

#top可以做到的

document.location.href = "#top";

在FF,IE和Chrome中正常运行

达蒙Itachi理查德 2020.03.09

真的很奇怪:这个问题已经存在了五年,现在还没有可用于滚动动画的JavaScript答案……因此,您可以开始:

var scrollToTop = window.setInterval(function() {
    var pos = window.pageYOffset;
    if ( pos > 0 ) {
        window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
    } else {
        window.clearInterval( scrollToTop );
    }
}, 16); // how fast to scroll (this equals roughly 60 fps)

如果愿意,可以将其包装在函数中,然后通过onclick属性进行调用检查这个jsfiddle

注意:这是一个非常基本的解决方案,可能不是性能最高的解决方案。可以在这里找到一个非常详细的示例:https : //github.com/cferdinandi/smooth-scroll

乐十三 2020.03.09

如果要进行平滑滚动,请尝试以下操作:

$("a").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
});

另一个解决方案是JavaScript window.scrollTo方法:

 window.scrollTo(x-value, y-value);

参数:

  • x值是沿水平轴的像素。
  • y值是沿垂直轴的像素。
乐十三 2020.03.09

平滑滚动,纯JavaScript:

(function smoothscroll(){
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo (0,currentScroll - (currentScroll/5));
    }
})();
GreenStafan 2020.03.09

尝试此滚动顶部

<script>
 $(document).ready(function(){
    $(window).scrollTop(0);
});
</script>
卡卡西达蒙西里 2020.03.09

您不需要jQuery即可执行此操作。一个标准的HTML标签就足够了...

<div id="jump_to_me">
    blah blah blah
</div>

<a target="#jump_to_me">Click Here To Destroy The World!</a>
斯丁阳光 2020.03.09

如果您不需要更改以进行动画处理,则无需使用任何特殊的插件-我只需要使用本机JavaScript window.scrollTo方法-传入0,0即可将页面立即滚动到左上角。

window.scrollTo(x-coord, y-coord);

参量

  • x坐标是沿水平轴的像素。
  • y-coord is the pixel along the vertical axis.

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android