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

2020/09/16 07:01 · javascript ·  · 0评论

如何使用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' });

真的很奇怪:这个问题已经存在了五年,现在还没有可用于滚动动画的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

<script>

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

在HTML

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

如果要进行平滑滚动,请尝试以下操作:

$("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中正常运行

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

非jQuery解决方案/纯JavaScript:

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

这将起作用:

window.scrollTo(0, 0);

试试这个

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

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

试试这个代码:

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

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

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

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

为什么不使用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>

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

   $(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.orghttp://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;
本文地址:http://javascript.askforanswer.com/shiyongjavascriptgundongdaoyemiandingbuma.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!