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

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

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

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

参量

• x坐标是沿水平轴的像素。
• y坐标是沿垂直轴的像素。

如果您确实希望平滑滚动，请尝试以下操作：

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

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

尝试此滚动顶部

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

平滑动画的更好解决方案：

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

参考：https : //developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollTo#Example

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

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

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

所有这些建议都适用于各种情况。对于那些谁通过搜索找到这个网页，还可以给这个一试。jQuery，无插件，滚动到element。

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

平滑滚动，纯JavaScript：

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

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

编辑：

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

另一种滚动顶部和左侧边距的方法：

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

<script>

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

在HTML

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

真的很奇怪：这个问题已经存在了五年了，现在还没有香草的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

如果要平滑滚动，请尝试以下操作：

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

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

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

参数：

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

With 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秒后消失

一个大量 的 用户建议选择HTML和身体标签为跨浏览器兼容，就像这样：

$('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）中则不返回0。

如果不想在滚动条已经位于顶部的情况下等待动画完成，请尝试以下操作：

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

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

    callback();
}

老#top可以做到的

document.location.href = "#top";

在FF，IE和Chrome中正常运行

尝试这个

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

$(document).scrollTop(0); 也可以。

非jQuery解决方案/纯JavaScript：

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

这将起作用：

window.scrollTo(0, 0);

试试这个代码：

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

div =>您要在其中移动滚动的Dom元素。

时间=>毫秒，定义滚动速度。

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

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

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

简短而简单！

您不需要JQuery。只需调用脚本即可

window.location = '#'

单击“转到顶部”按钮

示例演示：

output.jsbin.com/fakumo#

PS：当您使用诸如angularjs之类的现代库时，请不要使用这种方法。这可能会破坏URL哈希。

只需使用此脚本即可滚动到顶部直接。

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

纯JavaScript解决方案：

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

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

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

html {
    scroll-behavior: smooth;
}

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

如果您不想平滑滚动，则可以在启动后立即作弊并停止平滑滚动动画...就像这样：

   $(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为一件事制作动画，但又要进行另一次没有动画的制作时，呢？即打开页面顶部的滑动式管理员登录面板，然后立即跳到顶部以查看它。

动机

这个简单的解决方案可以在本地运行，并且可以平滑滚动到任何位置。

#在我看来，它避免使用锚链接（带有的链接），如果您要链接到某个节，则该链接很有用，但在某些情况下不太舒服，尤其是在指向顶部时，这可能会导致两个不同的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。

您可以简单地从链接中使用目标，例如#someid，其中#someid是div的ID。

或者，您可以使用任何数量的滚动插件，使其更加美观。

http://plugins.jquery.com/project/ScrollTo是一个示例。

您可以像本小提琴中那样尝试使用JS http://jsfiddle.net/5bNmH/1/

在页面页脚中添加“转到顶部”按钮：

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

function scrolltop() {

    var offset = 220;
    var duration = 500;

    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('#back-to-top').fadeIn(duration);
        } else {
            jQuery('#back-to-top').fadeOut(duration);
        }
    });

    jQuery('#back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    });
}

以上所有答案均不适用于SharePoint 2016。

它必须像这样完成：https : //sharepoint.stackexchange.com/questions/195870/

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