jquery,返回到顶部按钮

最新推荐文章于 2024-10-18 17:51:23 发布

weixin_30595035

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量35

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hzj680539/p/5048201.html

版权

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     });