jquery实现楼层滚动效果

本文实例为大家分享了jquery实现楼层滚动效果展示的具体代码，供大家参考，具体内容如下

html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/base.css" rel="external nofollow" >
  <style>
    #header,#f1,#f2,#f3{
      width: 80%;
      height: 500px;
      background: yellow;
      margin-left: 10%;
      margin-top: 50px;
    }
    #f1{
      background: green;
    }
    #f2{
      background: red;
    }
    #f3{
      background: blue;
    }
    #lift{
      position: fixed;
      top: 280px;
      display: none;
    }
    .lift_btn{
      display: inline-block;
      width: 50px;
      height: 50px;
      border: 1px solid #000;
    }
    .hover{
      background: red;
    }
  </style>
</head>
<body>
  <div id="header"></div>
  <div class="floor" id="f1">
    <p>第一层</p>
  </div>
  <div class="floor" id="f2">
    <p>第二层</p>
  </div>
  <div class="floor" id="f3">
    <p>第三层</p>
  </div>
  <div id="lift">
    <ul>
      <li class="lift_item">
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="lift_btn">
          <span>1</span>
        </a>
      </li>
      <li class="lift_item">
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="lift_btn">
          <span>2</span>
        </a>
      </li>
      <li class="lift_item">
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="lift_btn">
          <span>3</span>
        </a>
      </li>
    </ul>
  </div> 

  <script src="js/jquery.min.js"></script>
  <script src="js/floor.js"></script>
</body>
</html>

js:

(()=>{
  var $lift=$("#lift");
  $(window).scroll(()=>{
    var scrollTop=$('html,body').scrollTop();
    var $f1=$("#f1");
    var offsetTop=$f1.offset().top;
    if(offsetTop<scrollTop+innerHeight/2)
      $lift.fadeIn(500);
    else
      $lift.fadeOut(500);
    var $floors=$(".floor");
    $floors.each((i,elem)=>{
      var $f=$(elem);
      if($f.offset().top<scrollTop+innerHeight/2)
        $lift.find(".lift_item:eq("+i+")").addClass("hover").siblings().removeClass("hover");
    });
  }); 

  $lift.children("ul").on("click","li",function(){
    var $li=$(this);
    var i=$li.index();
    var $fi=$(".floor:eq("+i+")");
    var offsetTop=$fi.offset().top;
    $("html").animate({
      scrollTop:offsetTop-60
    },500)
  })
})();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js，jquery滚动/跳转页面到指定位置的实现思路

    要解决两个需求: 一个是从A页面跳到B页面,滚动到页面的任何地方: 第二个是在B页面内部点击某个元素,滚动到页面的任何地方: 怎么解决啊?很简单,当然是用锚点. 首先在A页面创建一个锚点 <body> <a href="b.html#pos" target="_blank">点击跳转</a> <body> 然后在B页面定义这个锚点 <body> ... 这里是很多文字,把页面撑开,撑出滚动条 ... <

  • js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 复制代码 代码如下: document.body.offsetWidth document.body.offsetHeight 在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小: 代码如下复制代码 复制代码 代码如下: document.documentElement.clientWidth document.documentElement.cli

  • jquery实现简单的无缝滚动

    jquery实现简单的无缝滚动 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-1.7.2.min.js" type="text/javascript"></script> </

  • JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合

    因为浏览器的兼容问题,如果使用javascript获取这些数值是一个相当痛苦的过程.好在JQuery提供了简单优雅,并且兼容的解决方法. 获取浏览器和页面文档的宽度和高度 复制代码 代码如下: //获取浏览器显示区域的高度 $(window).height(); //获取浏览器显示区域的宽度 $(window).width(); //获取页面的文档高度 $(document.body).height(); //获取页面的文档宽度 $(document.body).width(); 获取滚动条的位

  • jQuery创建平滑的页面滚动(顶部或底部)

    在这篇文章中,我将通过本教程向您展示了如何创建一个平滑的滚动效果,使用jQuery.让您可以滚动到你的网页的顶部或底部 它是如何工作的 首先,加载jquery库在</ head>标签结束前: 复制代码 代码如下: <script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery1.3.2.js"></script>jQuery滚动到底部: 链接

  • jQuery scroll事件实现监控滚动条分页示例

    scroll事件适用于window对象,但也可滚动iframe框架与CSS overflow属性设置为scroll的元素. 复制代码 代码如下: $(document).ready(function () { //本人习惯这样写了    $(window).scroll(function () {        //$(window).scrollTop()这个方法是当前滚动条滚动的距离        //$(window).height()获取当前窗体的高度        //$(docume

  • JQuery插件iScroll实现下拉刷新，滚动翻页特效

    JQuery插件:iScroll 页面布局: <div id="wrapper"> <div id="scroller"> <div id="pullDown"> <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span> <

  • jquery easyui滚动条部分设置介绍

    在使用dialog插件时,默认是屏幕居中的,但是当页面出现滚动条时,dialog并没有随着滚动条往下滚动,这时就需要用户滑动滚动条来定位dialog,这不人性化,在说出解决方案前先来普及一下jquery关于定位的几个方法 复制代码 代码如下: //获取浏览器显示区域的高度 $(window).height(); //获取浏览器显示区域的宽度 $(window).width(); //获取页面的文档高度 $(document.body).height(); //获取页面的文档宽度 $(docume

  • jquery无缝向上滚动实现代码

    JS部份 复制代码 代码如下: $(function(){ var $this = $(".renav"); var scrollTimer; $this.hover(function(){ clearInterval(scrollTimer); },function(){ scrollTimer = setInterval(function(){ scrollNews( $this ); }, 2000 ); }).trigger("mouseout"); });

  • 六款帮助你实现惊艳视差滚动效果的jQuery插件

    六款帮助你实现惊艳视差滚动效果的jQuery插件

    在网页设计中,视差滚动(Parallax Scrolling)是当下流行的网页设计技术,通过让多层背景以不同的速度或者不同的方向移动来形成非常有趣的 3D 运动效果.下面是一些运用视差滚动效果的优秀网页案例: 视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是"改变".在网页设计中,视差滚动(Parallax Scrolling)是当下流行的网页设计技术,通过让多层背景以不同的速度或者不同的方向

随机推荐