如何使用JavaScript / jQuery滚动到页面顶部?

2020/10/29 13:22 · javascript ·  · 0评论

有没有一种方法可以使用JavaScript / jQuery控制浏览器滚动?

当我向下滚动页面一半,然后触发重新加载时,我希望页面进入顶部,但它会尝试找到最后一个滚动位置。所以我这样做:

$('document').ready(function() {
   $(window).scrollTop(0);
});

但是没有运气。

编辑

因此,当页面加载后,我打电话给您时,您的两个答案都有效。但是,如果我只是在页面上刷新,则看起来浏览器会在.ready事件发生后计算并滚动到其旧的滚动位置(我也测试了body onload()函数)。

因此,接下来的工作是,有没有办法防止浏览器滚动到其过去的位置,或者在其完成工作后重新滚动至顶部?

哇,我这个问题迟到了9年。干得好:

将此代码添加到您的onload。

// This prevents the page from scrolling down to where it was previously.
if ('scrollRestoration' in history) {
    history.scrollRestoration = 'manual';
}
// This is needed if the user scrolls down during page load and you want to make sure the page is scrolled to the top once it's fully loaded. This has Cross-browser support.
window.scrollTo(0,0);

history.scrollRestoration浏览器支持:

Chrome:受支持(自46开始)

Firefox:受支持(自46起)

边缘:受支持(自79开始)

IE:不支持

Opera:受支持(自33起)

Safari:受支持

对于IE,如果要在自动向下滚动后重新滚动到顶部,则对我有用:

var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
if(isIE11) {
    setTimeout(function(){ window.scrollTo(0, 0); }, 300);  // adjust time according to your page. The better solution would be to possibly tie into some event and trigger once the autoscrolling goes to the top.
} 

跨浏览器的纯JavaScript解决方案:

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

几乎得到它-你需要设置scrollTopbody,而不是window

$(function() {
   $('body').scrollTop(0);
});

编辑:

也许您可以在页面顶部添加空白锚点:

$(function() {
   $('<a name="top"/>').insertBefore($('body').children().eq(0));
   window.location.hash = 'top';
});

有没有一种方法可以防止浏览器滚动到其过去的位置,或者在完成其工作后重新滚动到顶部?

以下jquery解决方案适用于我:

$(window).unload(function() {
    $('body').scrollTop(0);
});

这是针对没有jQuery'ers的纯JavaScript动画滚动版本:D

var stepTime = 20;
var docBody = document.body;
var focElem = document.documentElement;

var scrollAnimationStep = function (initPos, stepAmount) {
    var newPos = initPos - stepAmount > 0 ? initPos - stepAmount : 0;

    docBody.scrollTop = focElem.scrollTop = newPos;

    newPos && setTimeout(function () {
        scrollAnimationStep(newPos, stepAmount);
    }, stepTime);
}

var scrollTopAnimated = function (speed) {
    var topOffset = docBody.scrollTop || focElem.scrollTop;
    var stepAmount = topOffset;

    speed && (stepAmount = (topOffset * stepTime)/speed);

    scrollAnimationStep(topOffset, stepAmount);
};

接着:

<button onclick="scrollTopAnimated(1000)">Scroll Top</button>

更新

现在,使用javascript,使用滚动效果转到页面顶部会更容易一些:

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scroll

有两种使用方法scroll API

这是我推荐的方法。使用选项对象:

window.scroll(options)

这是一个更好的选择,因为您可以定义一个behavior应用内置缓动动画道具。

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

另一种方法是使用x和y坐标。

window.scroll(x-coord, y-coord)

x坐标-是要在左上方显示的文档水平轴上的像素。

y坐标-是要在左上角显示的文档垂直轴上的像素。


请勿使用旧答案

这是我们的原始javascript实现。它具有简单的缓和效果,因此单击“到达顶部”按钮后,用户不会感到震惊

它很小,在缩小时会变得更小。寻找替代jquery方法的开发者,但想要相同的结果,可以尝试一下。

JS

document.querySelector("#to-top").addEventListener("click", function(){

    var toTopInterval = setInterval(function(){

        var supportedScrollTop = document.body.scrollTop > 0 ? document.body : document.documentElement;

        if (supportedScrollTop.scrollTop > 0) {
            supportedScrollTop.scrollTop = supportedScrollTop.scrollTop - 50;
        }

        if (supportedScrollTop.scrollTop < 1) {
            clearInterval(toTopInterval);
        }

    }, 10);

},false);

的HTML

<button id="to-top">To Top</button>

干杯!

这对我有用:

window.onload = function() {
    // short timeout
    setTimeout(function() {
        $(document.body).scrollTop(0);
    }, 15);
};

setTimeout在里面使用一个简短的文字onload,使浏览器有机会进行滚动。

您可以使用jQuery

jQuery(window).load(function(){

    jQuery("html,body").animate({scrollTop: 100}, 1000);

});

使用以下功能

window.scrollTo(xpos, ypos)

这里xpos是必需的。沿x轴(水平)滚动到的坐标(以像素为单位)

ypos也是必需的。沿y轴(垂直)滚动到的坐标(以像素为单位)

$(function() {
    // the element inside of which we want to scroll
        var $elem = $('#content');

        // show the buttons
    $('#nav_up').fadeIn('slow');
    $('#nav_down').fadeIn('slow');  

        // whenever we scroll fade out both buttons
    $(window).bind('scrollstart', function(){
        $('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
    });
        // ... and whenever we stop scrolling fade in both buttons
    $(window).bind('scrollstop', function(){
        $('#nav_up,#nav_down').stop().animate({'opacity':'1'});
    });

        // clicking the "down" button will make the page scroll to the $elem's height
    $('#nav_down').click(
        function (e) {
            $('html, body').animate({scrollTop: $elem.height()}, 800);
        }
    );
        // clicking the "up" button will make the page scroll to the top of the page
    $('#nav_up').click(
        function (e) {
            $('html, body').animate({scrollTop: '0px'}, 800);
        }
    );
 });

用这个

以下代码可在Firefox,Chrome和Safari中运行,但是我无法在Internet Explorer中对其进行测试。有人可以测试一下,然后编辑我的答案或评论吗?

$(document).scrollTop(0);

我的纯(动画)Javascript解决方案:

function gototop() {
    if (window.scrollY>0) {
        window.scrollTo(0,window.scrollY-20)
        setTimeout("gototop()",10)
    }
}

说明:

window.scrollY 是由浏览器维护的变量,该变量从滚动窗口的顶部开始的像素数量。

window.scrollTo(x,y) 是一种在x轴和y轴上滚动窗口特定数量像素的功能。

从而, window.scrollTo(0,window.scrollY-20)将页面向顶部移动20个像素。

setTimeout在10毫秒再次调用函数,这样我们就可以将它另一个20个像素(动画),以及if语句检查我们仍然需要滚动。

您为什么不只在HTML文件的开头使用一些参考元素,例如

<div id="top"></div>

然后,当页面加载时,只需执行

$(document).ready(function(){

    top.location.href = '#top';

});

如果该功能启动浏览器滚动,您只需

$(window).load(function(){

    top.location.href = '#top';

});

跨浏览器滚动到顶部:

        if($('body').scrollTop()>0){
            $('body').scrollTop(0);         //Chrome,Safari
        }else{
            if($('html').scrollTop()>0){    //IE, FF
                $('html').scrollTop(0);
            }
        } 

跨浏览器滚动到id = div_id的元素:

        if($('body').scrollTop()>$('#div_id').offset().top){
            $('body').scrollTop($('#div_id').offset().top);         //Chrome,Safari
        }else{
            if($('html').scrollTop()>$('#div_id').offset().top){    //IE, FF
                $('html').scrollTop($('#div_id').offset().top);
            }
        } 

要回答您编辑过的问题,您可以onscroll像这样注册处理程序:

document.documentElement.onscroll = document.body.onscroll = function() {
    this.scrollTop = 0;
    this.onscroll = null;
}

这样就可以有效地取消滚动的第一次尝试(可能是浏览器自动进行的尝试)。

如果您处于快速模式(感谢@Niet the Dark Absol):

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

如果您处于严格模式下:

document.documentElement.scrollTop = 0;

这里不需要jQuery。

这正在工作:

jQuery(document).ready(function() {
     jQuery("html").animate({ scrollTop: 0 }, "fast");
});

就我而言,身体没有发挥作用:

$('body').scrollTop(0);

但是HTML起作用了:

$('html').scrollTop(0);

这两个的结合帮助了我。由于我的sidenav不能滚动,因此其他答案都无济于事。

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

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

}, 15);
var totop = $('#totop');
totop.click(function(){
 $('html, body').stop(true,true).animate({scrollTop:0}, 1000);
 return false;
});

$(window).scroll(function(){
 if ($(this).scrollTop() > 100){ 
  totop.fadeIn();
 }else{
  totop.fadeOut();
 }
});

<img id="totop" src="img/arrow_up.png" title="Click to go Up" style="display:none;position:fixed;bottom:10px;right:10px;cursor:pointer;cursor:hand;"/>

没有动画,只是scroll(0, 0)(香草JS)

如果有人在使用sidenav进行角度和材质设计。这将把您带到页面顶部:

let ele = document.getElementsByClassName('md-sidenav-content');
    let eleArray = <Element[]>Array.prototype.slice.call(ele);
    eleArray.map( val => {
        val.scrollTop = document.documentElement.scrollTop = 0;
    });

Seeint哈希应该可以完成这项工作。如果您有标题,则可以使用

window.location.href = "#headerid";

否则,仅#号会起作用

window.location.href = "#";

并且当它被写入URL时,如果您刷新它将会保留。

实际上,如果您想在onc​​lick事件上进行操作,则不需要JavaScript,您只需在元素周围放置一个链接并将其#用作href。

首先将空白的锚标签添加到您要去的地方

<a href="#topAnchor"></a> 

现在在标题部分添加一个函数

 function GoToTop() {
            var urllocation = location.href;
            if (urllocation.indexOf("#topAnchor") > -1) {
                window.location.hash = "topAnchor";
            } else {
                return false;
            }
        }

最后将一个onload事件添加到body标签

<body onload="GoToTop()">

通用版本适用于任何X和Y值,并且与window.scrollTo api相同,只是增加了scrollDuration。

*与window.scrollTo浏览器api匹配的通用版本**

function smoothScrollTo(x, y, scrollDuration) {
    x = Math.abs(x || 0);
    y = Math.abs(y || 0);
    scrollDuration = scrollDuration || 1500;

    var currentScrollY = window.scrollY,
        currentScrollX = window.scrollX,
        dirY = y > currentScrollY ? 1 : -1,
        dirX = x > currentScrollX ? 1 : -1,
        tick = 16.6667, // 1000 / 60
        scrollStep = Math.PI / ( scrollDuration / tick ),
        cosParameterY = currentScrollY / 2,
        cosParameterX = currentScrollX / 2,
        scrollCount = 0,
        scrollMargin;

    function step() {        
        scrollCount = scrollCount + 1;  

        if ( window.scrollX !== x ) {
            scrollMargin = cosParameterX + dirX * cosParameterX * Math.cos( scrollCount * scrollStep );
            window.scrollTo( 0, ( currentScrollX - scrollMargin ) );
        } 

        if ( window.scrollY !== y ) {
            scrollMargin = cosParameterY + dirY * cosParameterY * Math.cos( scrollCount * scrollStep );
            window.scrollTo( 0, ( currentScrollY - scrollMargin ) );
        } 

        if (window.scrollX !== x || window.scrollY !== y) {
            requestAnimationFrame(step);
        }
    }

    step();
}

我记得看到这个贴在其他地方(我找不到位置),但这确实很好:

setTimeout(() => {
    window.scrollTo(0, 0);
}, 0);

这很奇怪,但是它的工作方式是基于JavaScript的堆栈队列的工作方式。完整的解释在这里找到的零延迟部分。


基本思想是,时间for
setTimeout并未实际指定要等待的设置时间,而是指定了要等待的最短时间。因此,当您告诉它等待0毫秒时,浏览器将运行所有其他排队的进程(例如,将窗口滚动到您的最后一个位置),然后执行回调。

 <script>
  sessionStorage.scrollDirection = 1;//create a session variable 
  var pageScroll = function() {
  window.scrollBy ({
   top: sessionStorage.scrollDirection,
   left: 0,
   behavior: 'smooth'
   });
   if($(window).scrollTop() + $(window).height() > $(document).height() - 1)
  {    
    sessionStorage.scrollDirection= Number(sessionStorage.scrollDirection )-300;
    setTimeout(pageScroll,50);//
   }
   else{
   sessionStorage.scrollDirection=Number(sessionStorage.scrollDirection )+1
   setTimeout(pageScroll,300); 
  }
};
pageScroll();
</script>
本文地址:http://javascript.askforanswer.com/ruheshiyongjavascript-jquerygundongdaoyemiandingbu.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

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

上一篇:
下一篇:

评论已关闭!