欢迎来到代码驿站!

jquery

当前位置:首页 > 网页前端 > jquery

jQuery实现回到顶部效果

时间:2021-04-26 11:02:06|栏目:jquery|点击:

本文实例为大家分享了jQuery实现回到顶部效果的具体代码,供大家参考,具体内容如下

动画:通过点击侧栏导航,页面到达相应的位置

jQuery方法:show(), hide(), animate()

动画效果:

代码:

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>回到顶部</title>
  <script src="D:\jQuery/jquery-3.3.1.js"></script>
  <style>
    body, div, ul, li{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    #container{
     margin: 10px;
   }
    #header{
     width: 100%;
     height:200px;
     border: 2px solid #000;
    }
    #contant ul li{
      width: 100%;
      height:600px;
      border: 2px solid #000;
    }
 
    #footer{
      width: 100%;
      height:200px;
      border: 2px solid #000;
    }
    #scroll{
      position: fixed;
      right: 50px;
      top: 300px;
      width: 80px;
      background: orange;
   opacity: 0.5
    }
    #scroll ul{
      list-style:none;
    }
    #scroll ul li{
      width: 100%;
      height: 45px;
      line-height:45px;
      text-align: center;
 
    }
  </style>
</head>
<body>
<div id="container">
<div id="header">头部</div>
<div id="contant">
  <ul>
    <li>图书</li>
    <li>服装</li>
    <li>电子</li>
    <li>宠物</li>
  </ul>
</div>
<div id="footer">底部</div>
<div id="scroll">
  <ul>
    <li>图书</li>
    <li>服装</li>
    <li>电子</li>
    <li>宠物</li>
    <li>回到顶部</li>
  </ul>
</div>
</div>
<script type="text/javascript">
  $(document).ready(function () {
    //当鼠标进入侧边导航栏时改变侧栏样式
    $("#scroll").mouseenter(function(){
  $(this).css( "opacity",1 );        
   });
    $("#scroll").mouseleave(function(){
 $(this).css("opacity",0.5);
   })
    $("#scroll ul li").mouseover(function(){
 
        $(this).css( {
               "color":"red",
        "cursor":"pointer"
               });
   });
    $("#scroll ul li").mouseout(function(){
 $(this).css("color","black");
   })
    //点击侧栏导航,页面到达相应位置
    $("#scroll ul li").click(function () {
      switch($(this).index()){
        case 4:
          // $(window).scrollTop(0);
          $(document.body).animate({"scrollTop":0},1000);
          $(document.documentElement).animate({"scrollTop":0},1000);
          break;
        case 0:
          $(document.body).animate({"scrollTop":200},1000);
          $(document.documentElement).animate({"scrollTop":200},1000);
          break;
        case 1:
          $(document.body).animate({"scrollTop":800},1000);
          $(document.documentElement).animate({"scrollTop":800},1000);
          break;
        case 2:
          $(document.body).animate({"scrollTop":1400},1000);
          $(document.documentElement).animate({"scrollTop":1400},1000);
          break;
        case 3:
          $(document.body).animate({"scrollTop":2000},1000);
          $(document.documentElement).animate({"scrollTop":2000},1000);
          break;
        default:
          break;
      }
 
    });
    });
</script>
</body>
<html>

上一篇:基于jQuery实现的双11天猫拆红包抽奖效果

栏    目:jquery

下一篇:jQuery实现的图片点击放大缩小功能案例

本文标题:jQuery实现回到顶部效果

本文地址:http://www.codeinn.net/misctech/108769.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有