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 相关文章推荐
jQuery中的deferred使用方法
Mar 27 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
Jquery $.map使用方法实例详解
Sep 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中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
兼容ie和firefox js关闭代码
2008/12/11 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
Python随机数random模块使用指南
2016/09/09 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
python主要用于哪些方向
2020/07/05 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
前台文员岗位职责
2013/12/28 职场文书
敬老院标语
2014/06/27 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
react antd实现动态增减表单
2021/06/03 Javascript
使用Python拟合函数曲线
2022/04/14 Python