返回顶部功能基本上各站都有,本站早期也贴过代码,这次主要是“去到底部”。
首先要引用jQuery库
<script src="//apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
下面是主要js代码,我已经进行了简单注释
$(function(){ $("#updown").css("top",window.screen.availHeight/2-100+"px"); // 按钮距离顶部的位置 $(window).scroll(function() { // 浏览器窗口滚动事件 if($(window).scrollTop() >= 100){ // 当滚动距顶部>=100时 $('#updown').fadeIn(300); // 元素显示 }else{ $('#updown').fadeOut(300); // 元素隐藏 } }); $('#updown .up').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); // 至顶 $('#updown .down').click(function(){$('html,body').animate({scrollTop: document.body.clientHeight+'px'}, 800);}); // 至底,取整个body的高度为至底部距离 });
相关CSS
用到的按钮使用的是外链图片,按个人喜好替换
#updown{_top:expression(eval((document.compatMode&&document.compatMode=="CSS1Compat")?documentElement.scrollTop+documentElement.clientHeight-this.clientHeight-1:document.body.scrollTop+document.body.clientHeight-this.clientHeight-1));position:fixed;_position:absolute;top:200px;right:30px;display:none} #updown span{cursor:pointer;width:48px;height:50px;display:block} #updown .up{background:url(http://i3.tietuku.com/bcfdc8800c3effd9.png) no-repeat} #updown .up:hover{background:url(http://i3.tietuku.com/bcfdc8800c3effd9.png) top right no-repeat} #updown .down{background:url(http://i3.tietuku.com/bcfdc8800c3effd9.png) bottom left no-repeat} #updown .down:hover{background:url(http://i3.tietuku.com/bcfdc8800c3effd9.png) bottom right no-repeat}
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/4508.html