使用JavaScript/jQuery滚动到页面顶部？

Question

我__CODE__在页面上有一个,当按下这个按钮时,__CODE__使用jQuery显示一个隐藏.

如何使用该函数中的JavaScript/jQuery命令滚动到页面顶部？即使滚动条立即跳到顶部也是可取的.我不是在寻找一个平滑的滚动.

Answer 1

如果您不需要更改动画,那么您不需要使用任何特殊插件 - 我只使用本机JavaScript window.scrollTo方法 - 传入0,0会立即将页面滚动到左上角.

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

参数

• x-coord是沿水平轴的像素.
• y-coord是沿垂直轴的像素.

Answer 2

如果你想要平滑滚动,尝试这样的事情:

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

这将采用任何<a>标签,href="#top"并使其平滑滚动到顶部.

Answer 3

试试这个滚动到顶部

<script>
 $(document).ready(function(){
    $(window).scrollTop(0);
});
</script>

Answer 4

你不需要jQuery来做到这一点.一个标准的HTML标签就足够了......

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

<a target="#jump_to_me">Click Here To Destroy The World!</a>

Answer 5

更流畅的动画解决方案:

// this changes the scrolling behavior to "smooth"
window.scrollTo({ top: 0, behavior: 'smooth' });

参考:https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Example

Answer 6

所有这些建议都适用于各种情况.对于那些谁通过搜索找到这个网页,还可以给这个一试.JQuery,没有插件,滚动到元素.

$('html, body').animate({
    scrollTop: $("#elementID").offset().top
}, 2000);

Answer 7

平滑滚动,纯javascript:

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

Answer 8

用动画滚动到页面顶部：

window.scrollTo({ top: 0, behavior: 'smooth' });

Answer 9

<script>

  $("a[href='#top']").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
  });
</script>

在HTML中

<a href="#top">go top</a>

Answer 10

如果你想做平滑滚动,请试试这个:

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

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

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

参数:

• x值是沿水平轴的像素.
• y值是沿垂直轴的像素.

Answer 11

真的很奇怪:这个问题现在已经活跃了五年了,仍然没有香草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

Answer 12

因为window.scrollTo(0, 0);非常快,
所以我尝试了Mark Ursino的例子,但在Chrome中没有任何反应
,我发现了这一点

$('.showPeriodMsgPopup').click(function(){
    //window.scrollTo(0, 0);
    $('html').animate({scrollTop:0}, 'slow');//IE, FF
    $('body').animate({scrollTop:0}, 'slow');//chrome, don't know if Safari works
    $('.popupPeriod').fadeIn(1000, function(){
        setTimeout(function(){$('.popupPeriod').fadeOut(2000);}, 3000);
    });
});

测试了所有3个浏览器,它工作
我正在使用蓝图css
这是当客户点击"立即预订"按钮并且没有选择租赁期间时,慢慢移动到日历所在的顶部并打开指向对话框div 2个字段,3秒后消失

Answer 13

<script>
$(function(){
   var scroll_pos=(0);          
   $('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>

编辑:

$('html, body').animate({scrollTop:(scroll_pos)}, 2000);

Answer 14

一个很大 的 用户推荐跨浏览器兼容性选择HTML和body标签,就像这样:

$('html, body').animate({ scrollTop: 0 }, callback);

如果你指望你的回调只运行一次,这可能会让你失望.它实际上会运行两次因为你选择了两个元素.

如果这对您来说是个问题,您可以这样做:

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    $('body').animate({ scrollTop: 0 }, callback);
}

这可行的原因是Chrome $('html').scrollTop()返回0,但在Firefox等其他浏览器中则不然.

如果您不希望在滚动条已位于顶部的情况下等待动画完成,请尝试以下操作:

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    if ($('body').scrollTop()) {
        $('body').animate({ scrollTop: 0 }, callback);
        return;
    }

    callback();
}

Answer 15

老人#top可以做到这一点

document.location.href = "#top";

适用于FF,IE和Chrome

Answer 16

试试这个

<script>
    $(window).scrollTop(100);
</script>

Answer 17

$(document).scrollTop(0); 也有效.

Answer 18

$(".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>

Answer 19

非jQuery解决方案/纯JavaScript:

document.body.scrollTop = document.documentElement.scrollTop = 0;

Answer 20

TypeScript 中的等效解决方案可能如下

   window.scroll({
      top: 0,
      left: 0,
      behavior: 'smooth'
    });

Answer 21

这将有效:

window.scrollTo(0, 0);

Answer 22

试试这段代码:

$('html, body').animate({
    scrollTop: $("div").offset().top
}, time);

div => Dom元素,您想要移动滚动.

time =>毫秒,定义滚动的速度.

Answer 23

纯 JavaScript 解决方案：

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
});

我在Codepen上写了一个动画解决方案

此外，您可以尝试使用 CSSscroll-behavior: smooth属性的另一种解决方案。

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

Answer 24

为什么不使用JQuery内置函数scrollTop:

$('html, body').scrollTop(0);//For scrolling to top

$("body").scrollTop($("body")[0].scrollHeight);//For scrolling to bottom

简短而简单!

Answer 25

只需使用此脚本滚动到顶部直接.

<script>
$(document).ready(function(){
    $("button").click(function(){
        ($('body').scrollTop(0));
    });
});
</script>

Answer 26

document.getElementById("elem").scrollIntoView();

Answer 27

如果你不想平滑滚动,你可以在你启动它时立即作弊并停止平滑滚动动画......就像这样:

   $(document).ready(function() {
      $("a[href='#top']").click(function() {
          $("html, body").animate({ scrollTop: 0 }, "1");              
          $('html, body').stop(true, true);

          //Anything else you want to do in the same action goes here

          return false;                              
      });
  });

我不知道是否推荐/允许,但它的工作原理:)

你什么时候用这个？我不确定,但也许当你想用一次点击用Jquery动画一个东西,但做另一个没有动画的东西？即打开页面顶部的滑入式管理员登录面板,并立即跳到顶部查看它.

Answer 28

你不需要JQuery.只需你可以调用脚本

window.location = '#'

点击"转到顶部"按钮

示例演示:

output.jsbin.com/fakumo#

PS:当你使用像angularjs这样的现代库时,不要使用这种方法.这可能会破坏URL hashbang.

Answer 29

使用纯Javascript平滑滚动，无需jQuery

// Get the btn
let topBtn = document.querySelector('.top-btn')

// On Click, Scroll to the page's top
topBtn.onclick = () => window.scrollTo({ top: 0, behavior: 'smooth'}) // Remove behavior: 'smooth' if you don't want smooth scrolling

// On scroll, Show/Hide the btn
window.onscroll = () => window.scrollY > 500 ? topBtn.style.display = 'block' : topBtn.style.display = 'none'

body {
  background-color: #111;
  height:5000px;
}


.top-btn {
  all:unset;
  position: fixed;
  right: 20px;
  bottom: 20px;
  cursor: pointer;
  font: bold 2rem monospace;
  color:white;
  display: none;
}

<button class="top-btn"></button>

Answer 30

动机

这个简单的解决方案可以原生工作,并实现平滑滚动到任何位置.

它避免使用锚链接(那些#),在我看来,如果你想链接到一个部分,但在某些情况下不太舒服,特别是当指向顶部时可能导致两个不同的URL指向相同的位置(http://www.example.org和http://www.example.org/#).

解

将id添加到要滚动到的标记中,例如您的第一部分,它会回答此问题,但ID可以放在页面的任何位置.

<body>
  <section id="top">
    <!-- your content -->
  </section>
  <div id="another"><!-- more content --></div>

然后作为按钮,您可以使用链接,只需使用这样的代码编辑onclick属性.

<a onclick="document.getElementById('top').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })">Click me</a>

其中参数document.getElementById是您要在单击后滚动到的标记的ID.

Answer 31

您可以简单地使用链接中的目标,例如#someid,其中#someid是div的id.

或者,您可以使用任何数量的滚动插件,使其更优雅.

http://plugins.jquery.com/project/ScrollTo就是一个例子.

Answer 32

上述答案均不适用于 SharePoint 2016。

必须这样做： https: //sharepoint.stackexchange.com/questions/195870/

var w = document.getElementById("s4-workspace");
w.scrollTop = 0;

Answer 33

您可以使用 javascript 的内置函数scrollTo：

function scroll() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}

<button onclick="scroll">Scroll</button>