经典的回到页面顶端 博客分类: JavaScript,jQuery htmlJavaScript回到顶端
程序员文章站
2024-03-09 11:21:17
...
经典的回到页面顶端,当页面滚动到一定的高度时,给一个回到顶端的小提示,可以很方便的滚动到顶端,省去鼠标滚动和拖动滚动条.直接贴代码(需引入jQuery.js):
JS:
$(function(){ // 滚动窗口来判断按钮显示或隐藏 $(window).scroll(function() { if ($(this).scrollTop() > 150) { $('.back-to-top').fadeIn(100); } else { $('.back-to-top').fadeOut(100); } }); // jQuery实现动画滚动 $('.back-to-top').click(function(event) { event.preventDefault(); $('html, body').animate({scrollTop: 0}, 500); }) })
CSS:
<style type="text/css"> .back-to-top:hover { background-color: rgba(0, 0, 0, 0.3); } .back-to-top { position: fixed; bottom: 3em; right: 3em; text-decoration: none; color: #EEEEEE; background-color: rgba(0, 0, 0, 0.3); font-size: 12px; padding: 1em; display: none; border-radius: 3px; border: 1px solid #CCCCCC; } </style>
HTML:
<footer> <hr> <a href="#" class="back-to-top" style="display: inline;">回到顶端</a> </footer>