How to achieve the return to top effect in native JS? (detailed explanation)

This article will introduce to you how to use native JS to achieve the return to top effect. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Recently I watched a case tutorial online - return to the top effect (native js implementation). Since this effect is more practical and not difficult, I implemented it once after reading it. The effect was pretty good, so I took notes in case I need it!

<a></a>

This a tag is used to implement the link back to the top, where href="javascript:;" is used to prevent the default behavior of the a tag, because we want to trigger a click event to make the scroll bar return top instead of jumping to the page. Of course, if you set it to href="", it will jump to the top of the page by default, but the user experience is relatively poor. We mainly want to achieve an easing effect. OK, let’s set the style for the a tag:

#btn {width:40px; height:40px; position:fixed; right:25px; bottom:10px; display:none; background:url(images/top_bg.png) no-repeat left top;}
#btn:hover {background:url(images/top_bg.png) no-repeat 0 -39px;}

Here the a tag is fixed in the lower right corner of the page through position:fixed. The specific position can be passed Fine tune right and bottom. Set the background image for the a tag, which is the picture above. The default is to display the upper half of the image, that is, 40 X 40. Due to the image size (40 X 80), the background position can be directly set to left top.

And by default, the a tag is hidden first. When we scroll the page, if the scroll height is greater than the visible area of ​​​​our computer, the a tag will be displayed. This is mainly implemented using JS, which will be discussed below!

The floating effect of the a tag is actually very simple. Just change the position of the background image. For details, refer to the css code above!

Now that the style of the return to the top button is available, the next step is to use JS to achieve the effect of easing back to the top when the button is clicked. The code is as follows:

window.onload = function(){
    var obtn = document.getElementById('btn');  //获取回到顶部按钮的ID
    var clientHeight = document.documentElement.clientHeight;   //获取可视区域的高度
    var timer = null; //定义一个定时器
    var isTop = true; //定义一个布尔值，用于判断是否到达顶部

    window.onscroll = function(){         //滚动条滚动事件

        //获取滚动条的滚动高度
        var osTop = document.documentElement.scrollTop || document.body.scrollTop; 

        if(osTop >= clientHeight){  //如果滚动高度大于可视区域高度，则显示回到顶部按钮
            obtn.style.display = 'block';
        }else{         //否则隐藏
            obtn.style.display = 'none';
        }

        //主要用于判断当 点击回到顶部按钮后 滚动条在回滚过程中，若手动滚动滚动条，则清除定时器
        if(!isTop){

            clearInterval(timer);
        }
        isTop = false;

    }

    obtn.onclick = function(){    //回到顶部按钮点击事件
        //设置一个定时器
        timer = setInterval(function(){
            //获取滚动条的滚动高度
            var osTop = document.documentElement.scrollTop || document.body.scrollTop;
            //用于设置速度差，产生缓动的效果
            var speed = Math.floor(-osTop / 6);
            document.documentElement.scrollTop = document.body.scrollTop = osTop + speed;
            isTop =true;  //用于阻止滚动事件清除定时器
            if(osTop == 0){
                clearInterval(timer);
            }
        },30);
    }
}

So here, our The effect can be achieved by returning to the top. You can get it in the browser to test it. In fact, there are many ways to achieve the return to the top effect. Here is just an implementation plan for reference!

For more return to top function special effects codes, please visit: Return to top code Column

[Related recommendations]

5 simple return to top special effect codes (collection)

html5 selected special effects code sharing (collection)

Recommended 5 useful online floating QQ customer service codes for free download (high quality)

Recommended 5 practical and beautiful web page floating QR code special effect codes

The above is the detailed content of How to achieve the return to top effect in native JS? (detailed explanation). For more information, please follow other related articles on the PHP Chinese website!