jq回到顶部

/*****************回到顶部****************/
.backTop{width:32px;height:48px;position: fixed;bottom:70px;right:18px;}
.backTop img{width:100%;}
$(function () {

    var  backTop=["
", " \"\"", "
", ].join(""); $('body').append(backTop); var backButton=$('#backTop'); function backToTop() { $('html,body').animate({ scrollTop: 0 }, 100); } backButton.on('click', backToTop); $(window).on('scroll', function () {/*当滚动条的垂直位置大于浏览器所能看到的页面的那部分的高度时,回到顶部按钮就显示 */ if ($(window).scrollTop() > $(window).height()) backButton.fadeIn("fast"); else backButton.fadeOut("fast"); }); $(window).trigger('scroll');/*触发滚动事件,避免刷新的时候显示回到顶部按钮*/ })

要点:获取滚动条的垂直偏移,即当前页面顶端到整个页面顶端的距离   $(window).scrollTop() 或者$(document).scrollTop() ,但是前者更兼容

$(window).height()   获取当前浏览器窗口的大小,浏览器拉伸大小就会变

$(document).height()  获取整个文档的高度

你可能感兴趣的:(前端笔记,html)