使用 JavaScript 滚动到页面顶部？

Posted 2023-03-10

【中文标题】使用 JavaScript 滚动到页面顶部？

【英文标题】：Scroll to the top of the page using JavaScript?

【发布时间】：2010-11-11 19:15:13

【问题描述】：

如何滚动条立即跳到页面顶部也是可取的，因为我不想实现平滑滚动。

【问题讨论】：

2019，避免“本站出现使用滚动链接定位效果。这可能不适用于异步平移”使用我的脚本***.com/a/57641938/5781320

这里的其他解决方案很棒，但我只需要在位于页面顶部的 html 元素上使用 focus()。

所以应该删除 jQuery 答案。

【参考方案1】：

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

或者，您可以使用任意数量的滚动插件，使其更加优雅。

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

【参考方案2】：

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

window.scrollTo(xCoord, yCoord);

参数

xCoord 是沿水平轴的像素。 yCoord 是沿垂直轴的像素。

【讨论】：

这是我的意思，如果您不需要动画平滑滚动，那么您不需要使用 jQuery。

Jeff 的评论很有趣，老实说，对于那些只想在 95% 的时间跨浏览器工作的人应该只使用 jQuery。这是来自现在必须编写大量纯 javascript 的人，因为我们无法承担图书馆减慢广告代码的开销:(

这个答案与问题无关。如果问题是：我应该使用什么脚本和方法滚动到页面顶部？正确答案在这里：***.com/questions/4147112/…

在 Firefox 40 和 Chrome 44 中为我工作（解决 Mikhail 的评论）

滚动到页面底部window.scrollTo(0, document.body.scrollHeight);

【参考方案3】：

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

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

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

【讨论】：

+1 如果您需要导航到特定元素而不是顶部，这很好。

使用 'Top' 跳转到页面顶部。

这似乎是处理 SPA 的最佳方式

不错！有没有办法让它平滑滚动？

如果您在页面中间使用getElementById 调用另一个按钮，这将不起作用。

【参考方案4】：

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

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

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

【讨论】：

+1。我只是想知道如何做这样的事情，谷歌把我带到这里。问题虽然，文档中的“scrollTop”功能在哪里？刚看了没找到。

scrollTop 不是函数，它是窗口元素的属性

这在使用 animate 的完整回调时无法正常工作，因为它会运行两次。

"html" 和 "body" 都是浏览器兼容性所必需的，即 Chrome v27 仅使用 "body" 滚动，而 IE8 则没有。 IE8 仅使用“html”滚动，但 Chrome v27 没有。

@jalchr 实际上，window.pageYOffset 将是窗口 e̶l̶e̶m̶e̶n̶t̶ 对象的属性。

【参考方案5】：

使用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 秒后它会消失

【讨论】：

感谢您指出您需要同时定位 html 和正文。我只是为 html 做的，想知道为什么它在 Chrome 中不起作用。

身体动画在 Safari 中确实有效，因此我正在相应地更新您的答案。

“已测试所有 3 个浏览器”？ Midori、LuaKit 和 Konqueror，对吗？ :p

为什么不直接做 $('html', 'body').animate(scrollTop:0) 而不是添加两行？

【参考方案6】：

试试这个

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

【参考方案7】：

所有这些建议都适用于各种情况。通过搜索找到此页面的人也可以尝试this。 jQuery，无插件，滚动到元素。

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

【参考方案8】：

试试这个滚动到顶部

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

【讨论】：

同理： if ('scrollRestoration' in history) history.scrollRestoration = 'manual';

谁知道这么简单！谢谢:)

【参考方案9】：

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

【讨论】：

请注意，当您不使用 Firefox 时，这将不起作用。只给出一个参数时会出现错误（错误：没有足够的参数 [nsIDOMWindow.scrollTo]）。

【参考方案10】：

如果您想滚动到任何带有 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;
    );
);``

【参考方案11】：

非jQuery解决方案/纯JavaScript：

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

【参考方案12】：

你可以尝试使用 JS，就像这个 Fiddle 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>

【参考方案13】：

<script>

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

在html中

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

【参考方案14】：

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

   $(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 为一件事制作动画，但在没有动画的情况下做另一件事？即在页面顶部打开一个滑入式管理登录面板，并立即跳转到顶部查看它。

【参考方案15】：

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

【讨论】：

你确定持续时间作为动画函数中的字符串有效吗？

你不能在animate函数中使用字符串，而是应该使用：$('html, body').animate(scrollTop:(scroll_pos), 2000);

把 0 括在括号里有什么意义？ ((0)) 将简单地计算为 0。

是的@Jack，你可以。

【参考方案16】：

真的很奇怪：这个问题已经存在 5 年了，仍然没有原生的 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

【讨论】：

该问题明确要求使用 jQuery 解决方案。所以并不奇怪

对我来说最好的解决方案。没有插件，没有庞大的 jquery 库，只有简单的 javascript。荣誉

伙计，我在 5 年后也创建了同样的逻辑 XD，完全一样的逻辑，只是值不同，比如间隔时间和我们用来减去的那个整数，不敢相信 XD . TBH，来这里是为了回答，但它已经在那里了，所以你的回答很赞成。

【参考方案17】：

lotofusers 建议同时选择 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();

【参考方案18】：

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

【参考方案19】：

旧的#top 可以做到这一点

document.location.href = "#top";

在 FF、IE 和 Chrome 中运行良好

【讨论】：

不错！有没有办法让它平滑滚动？

您应该避免基于导航的解决方案，请参阅 Sriramajeyam 的回答中的 cmets。

【参考方案20】：

平滑滚动，纯javascript：

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

【参考方案21】：

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

window.location = '#'

点击“转到顶部”按钮

示例演示：

output.jsbin.com/fakumo#

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

【讨论】：

不幸的是，这不是最好的解决方案，因为在这种情况下您是在物理上更改位置而不是滚动页面。如果位置很重要（在使用 Angular 路由的情况下），这可能会导致问题

@YaroslavRogoza 是正确的。虽然它可能适用于简单的情况，但我不推荐此解决方案。位置变得越来越重要，单页应用程序广泛使用哈希来处理导航。在此之后添加基于散列的导航时，您将立即引入一个副作用错误，或者将此添加到基于散列的导航。

【参考方案22】：

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

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

【参考方案23】：

有趣的是，其中大多数对我来说根本不起作用，所以我使用了 jQuery-ScrollTo.js：

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

它奏效了。 $(document).scrollTop() 正在返回 0，而这个实际上可以代替。

【参考方案24】：

试试这个

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

【参考方案25】：

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

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

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

简短而简单！

【讨论】：

你只是缺少链接to the doc

【参考方案26】：

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

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

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

【参考方案27】：

试试这个代码：

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

div => 要移动滚动的 Dom 元素。

time =>毫秒，定义滚动的速度。

【参考方案28】：

当顶部滚动顶部小于限制底部并且从底部到顶部滚动标题为粘性时。下面参见小提琴示例。

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/

【参考方案29】：

如果你想做平滑滚动，请试试这个：

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

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

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

参数：

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

【讨论】：

copycat...查看用户的答案...这只是前 2 个答案的汇编...。

这是使用 *** 的一种合法方式 - 将它放在一个地方更实用。 Joel Spolsky 使用重复使用现有答案作为 *** 应该如何在某一时刻工作的示例。如果您有兴趣，我可以尝试找到博客文章

应该提到你的第一个解决方案需要 jQuery。

【参考方案30】：

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

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