jquery,返回到顶部按钮

HTML:

<footer>
  <a href="#" class="top">&uarr;</a>
</footer>

CSS:

.top:hover{
    opacity:1;
    transition:1s;
}

JS:

 1 $(document).ready(function() {
 2     var offset=250, // At what pixels show Back to Top Button
 3     scrollDuration=300; // Duration of scrolling to top
 4     $(window).scroll(function() {
 5         if ($(this).scrollTop() > offset) {
 6              $('.top').fadeIn(500); // Time(in Milliseconds) of appearing of the Button when scrolling down.
 7         } else {
 8         　　　$('.top').fadeOut(500); // Time(in Milliseconds) of disappearing of Button when scrolling up.
 9         }
10     });
11 
12     // Smooth animation when scrolling
13     $('.top').click(function(event) {
14     　　event.preventDefault();
15        $('html, body').animate({
16             scrollTop: 0}, scrollDuration);
17         })
18     });

 

Link

posted @ 2015-12-15 14:22  提佰萬  阅读(229)  评论(0)  编辑  收藏  举报