jquery实现的鼠标下拉滚动置顶效果

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

jquery实现的鼠标下拉滚动置顶效果

  2020-05-13 我要评论
$(function(){ 
    //置顶按钮显示/隐藏实现 
    $(window).scroll(function(){ 
      var w_height = $(window).height();//浏览器高度 
      var scroll_top = $(document).scrollTop();//滚动条到顶部的垂直高度 
      if(scroll_top > w_height){ 
          $("#goto-top").fadeIn(500); 
        }else{ 
          $("#goto-top").fadeOut(500); 
      } 
    }); 
  //置顶 
  $("#goto-top").click(function(e){ 
      e.preventDefault(); 
      $(document.documentElement).animate({ 
        scrollTop: 0 
        },200); 
      //支持chrome 
      $(document.body).animate({ 
        scrollTop: 0 
        },200); 
    }); 
  }) 
</script> 
<style type="text/css"> 
  #goto-top { 
    display:none; 
    position:fixed; 
    width:38px; 
    height:36px; 
    background:url(images/goto-top.png) no-repeat 0 0; 
    bottom:40px; 
    right:40px; 
    -webkit-transition:all 0.2s; 
    -moz-transition:all 0.2s; 
    -o-transition:all 0.2s; 
    transition:all 0.2s; 
    z-index:9999; 
  } 
  #goto-top:hover { 
    background:url(images/goto-top.png) no-repeat 0 -36px; 
  } 
</style> 
</head>

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们