关闭边栏(ESC)打开边栏(ESC)
一、先在</body>前定义回到顶部的标签DIV:
|
1 2 3 |
<div class="scrollTop"> <i class="fa fa-arrow-up"></i> </div> |
二、定义样式：.scrollTop的样式：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.scrollTop { position: fixed; bottom: 56px; right: 42px; width: 42px; height: 42px; background-color: #222; border-radius: 2px; border: 1px solid #343434; text-align: center; line-height: 42px; cursor: pointer; display: none; } .scrollTop i { color: #fff; font-size: 18px; } |
三、定义Jquery在滚动一定高度后出现回到顶部的DIV：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// 监听是否显示回到顶部div $(window).scroll(function(){ var windowH = $(window).height(); var scrollTop = $(document).scrollTop(); if (scrollTop > windowH) { $('.scrollTop').fadeIn(500); //半秒渐入动画 } else { $('.scrollTop').fadeOut(500); //半秒渐隐动画 } }); //点击回到顶部后回到顶部 $(".scrollTop").click(function(){ $('body,html').animate({scrollTop: 0}, 1000); return false; }); }) |
接触jquery后，慢慢发现它的强大，太牛了，正在学习它中…