web的几种返回顶部

Posted 2020-09-24 tanxiang6690

回到顶部backtoTop 滚动回到顶部 jquery/js效果还不错！支持现代浏览器包括 ie6。position: absolute;和fixed.两种方法！

一，jQuery方法的backtoTop：

　　CSS：

        .backtoTop1 {
            height: 100px;
            width: 100px;
            /* 固定定位 */
            position: fixed; 
            padding-top: 8px;
            right: 0;
            bottom: 0;
            display: none;
            z-index: 9999;
            background: red;
        }

　　JavaScript：

            //滚动时触发
            $(window).scroll(function() {
                //获取滚动条到顶部的垂直高度
                var sc = $(window).scrollTop();
                if(sc > 0) {
                    $("#backtoTop1").stop().show();
                } else {
                    $("#backtoTop1").stop().hide();
                }
            });
            $("#backtoTop1").click(function() {
                $(‘body,html‘).animate({
                    scrollTop: 0
                });
            });

 

二，js方法的backtoTop：

　　CSS：

        .backtoTop2 {
            height: 100px;
            width: 100px;
            position: fixed; //固定定位
            padding-top: 8px;
            right: 200px;
            bottom: 0;
            display: none;
            z-index: 9999;
            background: red;
            cursor: pointer;
            text-align: center;
            color: #fff;
            line-height: 100px;
        }

　　JavaScript：

            // 给window注册滚动监听事件
            window.onscroll = function(){
                // 获取返回顶部的按钮
                var toTop = document.getElementById(‘backToTop2‘);
                // 获取滚动条距离页面顶部的距离
                var topH = document.documentElement.scrollTop || document.body.scrollTop;
                // 判断当滚动条距离页面顶部300px时显示出来
                if (topH > 300) {
                    toTop.style.display = ‘block‘;
                } else {
                    toTop.style.display = ‘none‘;
                }
                // 给返回顶部的按钮注册一个点击事件
                toTop.onclick = function(){
                    // 页面滚动到left：0和top：0的位置；
                    window.scrollTo(0, 0);
                }
            }

 以上方法仅供参考？