JS获取网页的高和宽 以及 点击按钮回到顶部动画

网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth

点击按钮回到顶部动画 按钮一直在的情况下

$(".Top").click(function(){
    $("html").animate({scrollTop:0
    },1000);
});

点击按钮回到顶部动画 按钮等滑到一定程度在出现

 $(window).scroll(function(){
     var gun = $(document).scrollTop(); //gun这个变量     就是向上滑动的距离
     if(gun>=0){ 
         $(".upToTop").show();
     }
    else{
         $(".upToTop").hide();
    }
})
$(".upToTop").click(function(){
    $("html").animate({scrollTop:0
    },1000);
});

.upToTop 按钮 1000毫秒的时间回到顶部

猜你喜欢

转载自blog.csdn.net/qq_43071910/article/details/83654967