PROSAGA码农传奇-Xedge-使用JavaScript / jQuery滚动到页面顶部？

28 条回复

0#
回复此人
biu~ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 一个 <a href="https://stackoverflow.com/a/1145297/1015595"> 批量 </A> <a href="https://stackoverflow.com/a/14981461/1015595"> 的 </A> <a href="https://stackoverflow.com/a/10278290/1015595"> 用户 </A> 建议选择html和body标签以实现跨浏览器兼容性，如下所示： </p> <pre> <code> $('html, body').animate({ scrollTop: 0 }, callback); </code> </pre> <P> 如果你指望你的回调只运行一次，这可能会让你失望。它实际上会运行两次因为你选择了两个元素。 </p> <P> 如果这对您来说是个问题，您可以这样做： </p> <pre> <code> function scrollToTop(callback) { if ($('html').scrollTop()) { $('html').animate({ scrollTop: 0 }, callback); return; } $('body').animate({ scrollTop: 0 }, callback); } </code> </pre> <P> 这可行的原因在于Chrome <code> $('html').scrollTop() </code> 返回0，但不在其他浏览器中，如Firefox。 </p> <P> 如果您不希望在滚动条已位于顶部的情况下等待动画完成，请尝试以下操作： </p> <pre> <code> function scrollToTop(callback) { if ($('html').scrollTop()) { $('html').animate({ scrollTop: 0 }, callback); return; } if ($('body').scrollTop()) { $('body').animate({ scrollTop: 0 }, callback); return; } callback(); } </code> </pre> </DIV>

编辑
1#
回复此人
谦成 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> <code> $(document).scrollTop(0); </code> 也有效。 </p> </DIV>

编辑
2#
回复此人
没身份别烦我 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以简单地使用链接中的目标，例如#someid，其中#someid是div的id。 </p> <P> 或者，您可以使用任何数量的滚动插件，使其更优雅。 </p> <P> <a href="http://plugins.jquery.com/project/ScrollTo" rel="noreferrer"> http://plugins.jquery.com/project/ScrollTo </A> 就是一个例子。 </p> </DIV>

编辑
3#
回复此人
不易青年。 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 真奇怪：这个问题现在已经活跃了五年了，而且还没有动画JavaScript回答来动画滚动所以你走了： </p> <pre> <code> 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) </code> </pre> <P> 如果你愿意，你可以将它包装在一个函数中并通过它调用它 <code> onclick </code> 属性。检查一下 <a href="http://jsfiddle.net/osoh6o5a/" rel="noreferrer"> 的jsfiddle </A> </p> <P> 注意：这是一个非常基本的解决方案，可能不是最高效的解决方案。这里有一个非常详细的例子： <a href="https://github.com/cferdinandi/smooth-scroll" rel="noreferrer"> https://github.com/cferdinandi/smooth-scroll </A> </p> </DIV>

编辑
4#
回复此人
回忆氵独奏♪ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 所有这些建议都适用于各种情况。对于那些通过搜索找到此页面的人，也可以给予 <a href="http://www.abeautifulsite.net/blog/2010/01/smoothly-scroll-to-an-element-without-a-jquery-plugin/" rel="noreferrer"> 这个 </A> 一试。 JQuery，没有插件，滚动到元素。 </p> <pre> <code> $('html, body').animate({ scrollTop: $("#elementID").offset().top }, 2000); </code> </pre> </DIV>

编辑
5#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 老人 <code> #top </code> 可以做到这一点 </p> <pre> <code> document.location.href = "#top"; </code> </pre> <P> 适用于FF，IE和Chrome </p> </DIV>

编辑
6#
回复此人
甲基蓝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> <script> $("a[href='#top']").click(function() { $("html, body").animate({ scrollTop: 0 }, "slow"); return false; }); </script> </code> </pre> <P> 在HTML中 </p> <pre> <code> <a href="#top">go top</a> </code> </pre> </DIV>

编辑
7#
回复此人
哇。 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 上述答案都不适用于SharePoint 2016。 </p> <P> 它必须这样做： <a href="https://sharepoint.stackexchange.com/questions/195870/"> https://sharepoint.stackexchange.com/questions/195870/ </A> </p> <pre> <code> var w = document.getElementById("s4-workspace"); w.scrollTop = 0; </code> </pre> </DIV>

编辑
8#
回复此人
庸人自扰 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 的<strong> 这将有效： </强> </p> <P> 的<strong> <code> window.scrollTo(0, 0); </code> </强> </p> </DIV>

编辑
9#
回复此人
句号了 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你可以尝试在这个小提琴中使用JS <a href="http://jsfiddle.net/5bNmH/1/" rel="nofollow"> http://jsfiddle.net/5bNmH/1/ </A> </p> <P> 在页脚中添加“转到顶部”按钮： </p> <pre> <code> <footer> <hr /> <p>Just some basic footer text.</p>  <a href="#" class="go-top">Go Top</a> </footer> </code> </pre> </DIV>

编辑
10#
回复此人
Mystery☀ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 为什么不使用JQuery内置函数scrollTop： </p> <pre> <code> $('html, body').scrollTop(0);//For scrolling to top $("body").scrollTop($("body")[0].scrollHeight);//For scrolling to bottom </code> </pre> <P> 简短而简单！ </p> </DIV>

编辑
11#
回复此人
誓言 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果您不需要更改动画，那么您不需要使用任何特殊插件 - 我只使用本机JavaScript window.scrollTo方法 - 传入0,0会立即将页面滚动到左上角。 </p> <pre> <code> window.scrollTo(x-coord, y-coord); </code> </pre> <P> 参数 </p> <UL> <LI> x-coord是沿水平轴的像素。 </LI> <LI> y-coord是沿垂直轴的像素。 </LI> </UL> </DIV>

编辑
12#
回复此人
仙风道骨刘憨憨 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果你想做平滑滚动，请试试这个： </p> <pre> <code> $("a").click(function() { $("html, body").animate({ scrollTop: 0 }, "slow"); return false; }); </code> </pre> <P> 另一个解决方案是JavaScript window.scrollTo方法： </p> <pre> <code> window.scrollTo(x-value, y-value); </code> </pre> <P> 参数： </p> <UL> <LI> x值是沿水平轴的像素。 </LI> <LI> y值是沿垂直轴的像素。 </LI> </UL> </DIV>

编辑
13#
回复此人
無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> $(".scrolltop").click(function() { $("html, body").animate({ scrollTop: 0 }, "slow"); return false; }); </code> </pre> <pre class="snippet-code-css lang-css prettyprint-override"> <code> .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; } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <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> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
14#
回复此人
无思 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你不需要jQuery来做到这一点。一个标准的HTML标签就足够了...... </p> <pre> <code> <div id="jump_to_me"> blah blah blah </div> <a target="#jump_to_me">Click Here To Destroy The World!</a> </code> </pre> </DIV>

编辑
15#
回复此人
甲基蓝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 激活所有浏览器。祝好运 </p> <pre> <code> 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); } </code> </pre> </DIV>

编辑
16#
回复此人
明月清风上善若水自由如风 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 的<strong> 试试这个滚动到顶部 </强> </p> <pre> <code> <script> $(document).ready(function(){ $(window).scrollTop(0); }); </script> </code> </pre> </DIV>

编辑
17#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <H2> 动机 </H2> <P> 这个简单的解决方案可以本地工作，并实现平滑滚动到任何位置。 </p> <P> 它避免使用锚链接（使用锚链接 <code> # </code> ）在我看来，如果你想链接到一个部分，但在某些情况下不太舒服，特别是当指向顶部时可能会导致指向同一位置的两个不同的URL（ <EM> <a href="http://www.example.org" rel="noreferrer"> http://www.example.org </A> </EM> 和 <EM> <a href="http://www.example.org/#" rel="noreferrer"> http://www.example.org/# </A> </EM> ）。 </p> <H2> 解 </H2> <P> 放一个 <EM> ID </EM> 要滚动到的标记，例如您的第一个 <EM> 部分 </EM> ，这回答了这个问题，但是 <EM> ID </EM> 可以放在页面的任何地方。 </p> <pre> <code> <body> <section id="top">  </section> <div id="another"></div> </code> </pre> <P> 然后作为按钮，您可以使用链接，只需编辑 <EM> 的onclick </EM> 属性与这样的代码。 </p> <pre> <code> <a onclick="document.getElementById('top').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })">Click me</a> </code> </pre> <P> 论证的地方 <code> document.getElementById </code> 是个 <EM> ID </EM> 单击后要滚动到的标记。 </p> </DIV>

编辑
18#
回复此人
無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 试试这段代码： </p> <pre> <code> $('html, body').animate({ scrollTop: $("div").offset().top }, time); </code> </pre> <P> 的<strong> div =＆gt; </强> 要在哪里移动滚动的Dom元素。 </p> <P> 的<strong> 时间=＆gt; </强> 毫秒，定义滚动的速度。 </p> </DIV>

编辑
19#
回复此人
❀⚘粉༵红༵回༵忆༵⚘❀ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 试试这个 </p> <pre> <code> <script> $(window).scrollTop(100); </script> </code> </pre> </DIV>

编辑
20#
回复此人
無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 只需使用此脚本滚动到顶部直接。 </p> <pre> <code> <script> $(document).ready(function(){ $("button").click(function(){ ($('body').scrollTop(0)); }); }); </script> </code> </pre> </DIV>

编辑
21#
回复此人
一别而尽几念深i | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> 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; }); } </code> </pre> </DIV>

编辑
22#
回复此人
甲基蓝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 更流畅的动画解决方案： </p> <pre> <code> // this changes the scrolling behavior to "smooth" window.scrollTo({ top: 0, behavior: 'smooth' }); </code> </pre> <P> 参考： <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Example" rel="noreferrer"> https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Example </A> </p> </DIV>

编辑
23#
回复此人
溪林 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果你不想平滑滚动，你可以在你启动它时立即作弊并停止平滑滚动动画......就像这样： </p> <pre> <code> $(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; }); }); </code> </pre> <P> 我不知道是否推荐/允许，但它的工作原理:) </p> <P> 你什么时候用这个？我不确定，但也许当你想用一次点击用Jquery动画一个东西，但做另一个没有动画的东西？即打开页面顶部的滑入式管理员登录面板，并立即跳到顶部查看它。 </p> </DIV>

编辑
24#
回复此人
無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 非jQuery解决方案/纯JavaScript： </p> <pre> <code> document.body.scrollTop = document.documentElement.scrollTop = 0; </code> </pre> </DIV>

编辑
25#
回复此人
甲基蓝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 同 <code> window.scrollTo(0, 0); </code> 非常快 <BR/> 所以我尝试了Mark Ursino的例子，但在Chrome中没有任何反应 <BR/> 我发现了这个 </p> <pre> <code> $('.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); }); }); </code> </pre> <P> 测试了所有3个浏览器并且它有效 <BR/> 我正在使用蓝图css <BR/> 这是当客户点击“立即预订”按钮并且没有选择租借期间时，慢慢移动到日历所在的顶部并打开指向2个字段的对话框div，3秒后它会消失 </p> </DIV>

编辑
26#
回复此人
757461156 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 平滑滚动，纯javascript： </p> <pre> <code> (function smoothscroll(){ var currentScroll = document.documentElement.scrollTop || document.body.scrollTop; if (currentScroll > 0) { window.requestAnimationFrame(smoothscroll); window.scrollTo (0,currentScroll - (currentScroll/5)); } })(); </code> </pre> </DIV>

编辑

登录后才能参与评论