web的几种返回顶部

Posted tanxiang6690

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web的几种返回顶部相关的知识,希望对你有一定的参考价值。

回到顶部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);
                }
            }

 以上方法仅供参考?

 

以上是关于web的几种返回顶部的主要内容,如果未能解决你的问题,请参考以下文章

网页返回顶部的几种方法

Laravel:如何在控制器的几种方法中重用代码片段

jQuery的几种简单实用效果

一张图,理顺 Spring Boot应用在启动阶段执行代码的几种方式

一张图,理顺 Spring Boot应用在启动阶段执行代码的几种方式

一张图,理顺 Spring Boot应用在启动阶段执行代码的几种方式