jQuery实现回到顶部效果


Posted in jQuery onOctober 19, 2020

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

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

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

动画效果:

jQuery实现回到顶部效果

代码:

<!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 相关文章推荐
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jQuery实现放大镜案例
Oct 19 #jQuery
jQuery插件实现图片轮播效果
Oct 19 #jQuery
jquery插件实现轮播图效果
Oct 19 #jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 #jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 #jQuery
jquery简易手风琴插件的封装
Oct 13 #jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 #jQuery
You might like
PHP中的output_buffering详细介绍
2014/09/27 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
PHP 实现缩略图
2021/03/09 PHP
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
python基础教程之获取本机ip数据包示例
2014/02/10 Python
Python functools模块学习总结
2015/05/09 Python
Python实现的栈(Stack)
2018/01/26 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
python实现弹窗祝福效果
2019/04/07 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
python 错误处理 assert详解
2020/04/20 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
python 深度学习中的4种激活函数
2020/09/18 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
英格兰足协官方商店:England Store
2019/07/12 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
小学新学期教师寄语
2014/01/18 职场文书
化妆品促销方案
2014/02/24 职场文书
经典公益广告词
2014/03/13 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
人生遥控器观后感
2015/06/11 职场文书
导游词之襄阳古城
2019/09/27 职场文书