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

Question

我在页面上有<button>，当按下此按钮时，使用jQuery显示隐藏的<div>。

如何在该功能中使用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"标记为{{1}}并将其平滑滚动到顶部。

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。 JQuery，没有插件，滚动到元素。

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

Answer 6

具有流畅动画效果的更好解决方案：

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

平滑滚动，纯javascript：

'posts.tags' => function ($query) {
    $query->addSelect(['tag']);
}

Answer 8

<script>

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

in html

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

Answer 9

如果您想进行平滑滚动，请尝试以下操作：

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

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

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

参数：

x-value是沿水平轴的像素。
y-value是沿垂直轴的像素。

Answer 10

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
这是当客户点击“立即预订”按钮并且没有选择租借期间时，慢慢移动到日历所在的顶部并打开指向2个字段的对话框div，3秒后它会消失

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

lot of users建议选择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 13

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

编辑：

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

Answer 14

旧的#top可以解决问题

document.location.href = "#top";

在FF，IE和Chrome中正常工作

Answer 15

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

Answer 16

试试这个

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

Answer 17

HashMap

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

Answer 18

非jQuery解决方案/纯JavaScript：

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

Answer 19

这样可行：

<强> window.scrollTo(0, 0);

Answer 20

试试这段代码：

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

div =＆gt; 要移动滚动的Dom元素。

时间=＆gt; 毫秒，定义滚动的速度。

Answer 21

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

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

Answer 22

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

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

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

简短而简单！

Answer 23

你不需要JQuery。您只需调用脚本

即可

window.location = '#'

点击＆＃34;转到顶部＆＃34;按钮

示例演示：

output.jsbin.com/fakumo#

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

Answer 24

动机

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

它避免使用锚点链接（那些带有#的链接），在我看来，如果你想链接到一个部分，但在某些情况下不太舒服，特别是当指向顶部时可能很有用导致两个不同的网址指向同一位置（ 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 25

如果你不想要平滑滚动，你可以在启动时尽快作弊并停止平滑滚动动画......就像这样：

   $(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 26

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

或者，你可以使用任何数量的滚动插件来使它更优雅。

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

Answer 27

TypeScript 中的等效解决方案如下所示：

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

Answer 28

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;
    });
}

Answer 29

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

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

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

Answer 30

你可以尝试在这个小提琴中使用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>

Answer 31

激活所有浏览器。祝你好运

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);
        }

Answer 32

试试这个

<script>
  $(function(){
   $('a').click(function(){
    var href =$(this).attr("href");
   $('body, html').animate({
     scrollTop: $(href).offset().top
     }, 1000)
  });
 });
 </script>

Answer 33

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

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

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

Answer 34

使用纯 Javascript 进行平滑滚动，而没有 jQuery

// Get The Id
var topPage = document.getElementById(`top-page`)

// On Click, Scroll to the Top of Page
topPage.onclick = () => window.scrollTo({ top: 0, behavior: 'smooth' })

// On scroll, Show/Hide the button
window.onscroll = () => {
  window.scrollY > 500
    ? (topPage.style.display = `block`)
    : (topPage.style.display = `none`)
}

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


#top-page {
  width: 50px;
  position: fixed;
  right: 30px;
  bottom: 30px;
  cursor: pointer;
  color: white;
  display: none;
}

<img id="top-page" src="https://svgshare.com/i/LW3.sv" alt="Top">

Answer 35

如果您想要滚动到任何带ID的元素，请尝试以下操作：

$('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash;
    $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 700, 'swing', function () {
        window.location.hash = target;
    });
});``

Answer 36

纯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;
    }
}

Answer 37

当顶部滚动顶部小于限制底部和底部到顶部滚动标题是粘滞。下面见小提琴示例。

var lastScroll = 0;

$(document).ready(function($) {

$(window).scroll(function(){

 setTimeout(function() { 
    var scroll = $(window).scrollTop();
    if (scroll > lastScroll) {

        $("header").removeClass("menu-sticky");

    } 
    if (scroll == 0) {
    $("header").removeClass("menu-sticky");

    }
    else if (scroll < lastScroll - 5) {


        $("header").addClass("menu-sticky");

    }
    lastScroll = scroll;
    },0);
    });
   });

https://jsfiddle.net/memdumusaib/d52xcLm3/

Answer 38

最短

location='#'

此解决方案是对pollirrata answer的改进，并且具有一些缺点：无法平滑滚动和更改页面位置，但是最短

Answer 39

滚动到的简单示例（使用 html 效率更高，但这里是使用 JavaScript 的方法）：

const btn = document.querySelector('.btn');
btn.addEventListener('click',()=>{
      window.scrollTo({
       left: 0,
       top: 0,
})})
window.addEventListener('scroll', function() {
    const scrollHeight = window.pageYOffset;
    if (scrollHeight > 500) {
        btn.classList.add('show-link');
    } else {
        btn.classList.remove('show-link');
    }
});

.section {
    padding-bottom: 5rem;
    height: 90vh;
}
.btn {
    position: fixed;
    bottom: 3rem;
    right: 3rem;
    background: blue;
    width: 2rem;
    height: 2rem;
    color: #fff;
    visibility: hidden;
    z-index: -100;
}
.show-link {
    visibility: visible;
    z-index: 100;
}

.title h2 {
    text-align: center;

}

    <section class="section">
      <div class="title">
        <h2>Section One</h2>
      </div>
    </section>
    <section class="section">
      <div class="title">
        <h2>Section Two</h2>
      </div>
    </section>
    <section  class="section">
      <div class="title">
        <h2>Section Three</h2>
      </div>
    </section>
    <a class="btn">
    </a>

Answer 40

如果您想动画化滚动动作，则没有 无需使用JavaScript ！

CSS：

html {
    scroll-behavior: smooth;
}

HTML：

<html>
  <body>
     <a id="top"></a>
     <!-- your document -->
     <a href="#top">Jump to top of page</a>
  </body>
</html>

Answer 41

只需尝试，不需要其他插件/框架

document.getElementById("jarscroolbtn").addEventListener("click", jarscrollfunction);

function jarscrollfunction() {
  var body = document.body; // For Safari
  var html = document.documentElement; // Chrome, Firefox, IE and Opera 
  body.scrollTop = 0; 
  html.scrollTop = 0;
}

<button id="jarscroolbtn">Scroll contents</button>

html, body {
  scroll-behavior: smooth;
}

Answer 42

document.getElementById("id of what you want to scroll to").scrollIntoView();

Answer 43

滚动到位于页面顶部的元素和元素

WebElement tempElement=driver.findElement(By.cssSelector("input[value='Excel']"));

            ((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", tempElement);

Answer 44

有趣的是，其中大部分都不适合我，所以我使用了jQuery-ScrollTo.js：

wrapper.find(".jumpToTop").click(function() {
    $('#wrapper').ScrollTo({
        duration: 0,
        offsetTop: -1*$('#container').offset().top
    });
});

它有效。 $(document).scrollTop()正在返回0，而这个实际上正在运作。

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

44 个答案:

动机

解决方案

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

最短

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

44 个答案:

动机

解决方案

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

最短

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