回到顶部或者底部前端html+css+js综合案例

admin

回到顶部或者底部前端html+css+js综合案例

代码如下：

1. <style>
   
2. .uptodown {
   
3.     outline: none;
   
4.     position: fixed;
   
5.     background-color: #fff;
   
6.     width: 40px;
   
7.     height: 40px;
   
8.     color: #999;
   
9.     display: flex;
   
10.     align-items: center;
    
11.     justify-content: center;
    
12.     font-size: 20px;
    
13.     box-shadow: 0 0 6px rgba(0,0,0,.12);
    
14.     cursor: pointer;
    
15.     z-index: 5
    
16. }
    
17. 
    
18. .d-fixed {
    
19.     right: 70px;
    
20.         width: 50px;
    
21. }
    
22. @media (max-width: 992px) {
    
23. .d-fixed {
    
24.     right: 0px;
    
25. }
    
26. 
    
27. }
    
28. </style>
    
29. <div id="scroll_to_top" class="d-fixed " style="position: fixed; _position: absolute; bottom: 180px;   height: 0px;display: none;">
    
30.         <a href="javascript:void(0);" class="uptodown" title="回到顶部"><i class="icon-angle-up"></i></a>
    
31. </div>
    
32. <div id="scroll_to_end" class="d-fixed " style="position: fixed; _position: absolute; bottom: 80px;   height: 50px;display: none;">
    
33.         <a href="javascript:void(0);" class="uptodown" title="直达底部"><i class="icon-angle-down"></i></a>
    
34. </div>
    
35. 
    
36. <script>
    
37. //回到顶部
    
38. var jscroll_to_top = $('#scroll_to_top');
    
39. $(window).scroll(function() {
    
40.         if ($(window).scrollTop() > 0) {
    
41.            jscroll_to_top.fadeIn('slow');
    
42.         } else {
    
43.                 jscroll_to_top.fadeOut('slow');
    
44.         }
    
45. });
    
46. jscroll_to_top.on('click', function() {
    
47.         $('html,body').animate({scrollTop: 0}, 'slow');
    
48. });
    
49. //直达底部
    
50. var jscroll_to_end = $('#scroll_to_end');
    
51. $(window).scroll(function() {
    
52.         if ($(window).scrollTop() < ($(document).height()-$(window).height()) ) {
    
53.            jscroll_to_end.fadeIn('slow');
    
54.         } else {
    
55.                 jscroll_to_end.fadeOut('slow');
    
56.         }
    
57. });
    
58. jscroll_to_end.on('click', function() {
    
59.         $('html,body').animate({scrollTop: $(document).height() }, 'slow');
    
60. });
    
61. </script>
    

复制代码