当前位置：网站首页>Back to the top of several options (JS)

Back to the top of several options (JS)

2022-07-26 11:31:00 【szjSmiling】

I like the last one best : Transition back to the top ! recommend
Be careful : The outermost parent cannot be set overflow:scroll; Otherwise, it will fail . resolvent : It's on the outside, adding a layer div.
1. Anchor point

<body style="height:2000px;">
    <div id="topAnchor"></div>
    <a href="#topAnchor" style="position:fixed;right:0;bottom:0"> Back to the top </a>
</body>


2.scrollTop

<body style="height:2000px;">
    <button id="test" style="position:fixed;right:0;bottom:0"> Back to the top </button>
    <script>
    test.onclick = function(){
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    }
    </script>
</body>

3.scrollTo():scrollTo(x,y) Method to scroll through the current window The document shown in , Let the coordinates in the document be x and y designated
The point is located in the upper left corner of the display area , Set up scrollTo(0,0) Can achieve the effect of returning to the top .

<body style="height:2000px;">
    <button id="test" style="position:fixed;right:0;bottom:0"> Back to the top </button>
<script>
test.onclick = function(){
    scrollTo(0,0);
}
</script>
</body>

4.scrollBy():scrollBy(x,y) Method to scroll through the current window The document shown in ,x and y Specifies the relative amount of scrolling

Just take the scrolling length of the current page as a parameter , Reverse scrolling , You can achieve the effect of returning to the top

<body style="height:2000px;">
<button id="test" style="position:fixed;right:0;bottom:0"> Back to the top </button>
<script>
test.onclick = function(){
var top = document.body.scrollTop || document.documentElement.scrollTop
scrollBy(0,-top);
}
</script>
</body>

5.scrollIntoView():Element.scrollIntoView Method to scroll the current element , Enter the visible area of the browser .
This method can accept a Boolean value as a parameter . If true, Representing the top of the element and the visible part of the current region
Align Top （ The premise is that the current area can be scrolled ）; If false, Represents the bottom of the element and the visible part of the current area
Align the tail of （ The premise is that the current area can be scrolled ）. If the parameter is not provided , The default is true.

<body style="height:2000px;">
<div id="target"></div>
<button id="test" style="position:fixed;right:0;bottom:0"> Back to the top </button>
<script>
test.onclick = function(){
target.scrollIntoView();
}
</script>
</body>

========================================
increase scrollTop Animation effect of :

returnTop(){
      let that = this;
      cancelAnimationFrame(this.timer);
      this.timer = requestAnimationFrame(function fn(){
        let oTop = document.body.scrollTop || document.documentElement.scrollTop;
        if(oTop > 0){
          document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
          that.timer = requestAnimationFrame(fn);
        }else{
          cancelAnimationFrame(that.timer);
        } 
      });
}


increase scrollTo() Animation effect :

var timer = null;
box.onclick = function(){
cancelAnimationFrame(timer);
    timer = requestAnimationFrame(function fn(){
    var oTop = document.body.scrollTop || document.documentElement.scrollTop;
        if(oTop > 0){
            scrollTo(0,oTop-50);
            timer = requestAnimationFrame(fn);
        }else{
            cancelAnimationFrame(timer);
        } 
    });
}

increase scrollBy() Animation effect :
var timer = null;
box.onclick = function(){
    cancelAnimationFrame(timer);
    timer = requestAnimationFrame(function fn(){
        var oTop = document.body.scrollTop || document.documentElement.scrollTop;
        if(oTop > 0){
            scrollBy(0,-50);
            timer = requestAnimationFrame(fn);
        }else{
            cancelAnimationFrame(timer);
        } 
    });
}

原网站

版权声明
本文为[szjSmiling]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/207/202207261039272187.html

边栏推荐

猜你喜欢

随机推荐