scrollTo(x,y)//可把内容滚动到指定的坐标
scrollTo(xpos,ypos)//x,y值必需

1、固定导航栏

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>固定导航栏</title>
  6.      <script src="my.js" type="text/javascript"></script>
  7.      <style>
  8.        *{
  9.            margin: 0;
  10.            padding: 0;
  11.        }
  12.         img{
  13.             vertical-align: top;
  14.         }
  15.          .main{
  16.              margin: 0 auto;
  17.              width: 1000px;
  18.              margin-top: 10px;
  19.          }
  20.          .fixed{
  21.              position: fixed;
  22.              top:0;
  23.              left:0;
  24.          }
  25.      </style>
  26.  </head>
  27.  <body>
  28.          <div class="top" id="Q-top">
  29.              <img src="data:images/top.png" alt="">
  30.          </div>
  31.          <div class="nav" id="Q-nav">
  32.              <img src="data:images/nav.png" alt="">
  33.          </div>
  34.          <div class="main">
  35.              <img src="data:images/main.png" alt="">
  36.          </div>
  37.  
  38.  </body>
  39.  </html>
  40.  <script>
  41.      var nav=$("Q-nav");
  42.      var navTop=nav.offsetTop;//导航栏距离顶部的距离
  43.      //alert(navTop);
  44.      window.onscroll=function(){
  45.          //console.log(scroll().top);
  46.          if(scroll().top>=navTop){
  47.              nav.className="nav fixed";
  48.          }else{
  49.              nav.className="nav";
  50.          }
  51.      }
  52.  </script>

2、鼠标移动跟随的广告

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>跟随的广告</title>
  6.      <style>
  7.          img{
  8.              position: absolute;
  9.              top:50px;
  10.              left:0;
  11.  
  12.          }
  13.          .txt{
  14.              width: 200px;
  15.              margin: 0 auto;
  16.          }
  17.      </style>
  18.  </head>
  19.  <body>
  20.      <img src="data:images/aside.jpg" alt="" id="ad">
  21.      <div class="txt" id="txt">
  22.          <p>好好学习，天天向上</p>
  23.          <p>天天奋斗，天天快乐</p>
  24.          <p>好好学习，天天向上</p>
  25.          <p>天天奋斗，天天快乐</p>
  26.          <p>好好学习，天天向上</p>
  27.          <p>天天奋斗，天天快乐</p>
  28.          <p>好好学习，天天向上</p>
  29.          <p>天天奋斗，天天快乐</p>
  30.          <p>好好学习，天天向上</p>
  31.          <p>天天奋斗，天天快乐</p>
  32.          <p>好好学习，天天向上</p>
  33.          <p>天天奋斗，天天快乐</p>
  34.          <p>好好学习，天天向上</p>
  35.          <p>天天奋斗，天天快乐</p>
  36.          <p>好好学习，天天向上</p>
  37.          <p>天天奋斗，天天快乐</p>
  38.          <p>好好学习，天天向上</p>
  39.          <p>天天奋斗，天天快乐</p>
  40.          <p>好好学习，天天向上</p>
  41.          <p>天天奋斗，天天快乐</p>
  42.          <p>好好学习，天天向上</p>
  43.          <p>天天奋斗，天天快乐</p>
  44.          <p>好好学习，天天向上</p>
  45.          <p>天天奋斗，天天快乐</p>
  46.      </div>
  47.  </body>
  48.  </html>
  49.  <script src="my.js" type="text/javascript"></script>
  50.  <script>
  51.      window.onload=function(){
  52.          var ad=$("ad");
  53.          var leader=0;
  54.          var target=0;
  55.          var timer=null;//定时器
  56.          var top=ad.offsetTop;
  57.          window.onscroll=function(){
  58.              target=scroll().top+top;//把最新的scrollTop给target
  59.              timer=setInterval(function(){
  60.                  leader=leader+(target-leader)/10;
  61.                  ad.style.top=leader+'px';
  62.              },30)
  63.          }
  64.  
  65.      }
  66.  </script>

3、小火箭返回顶部

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <style>
  7.          body{
  8.              width: 2000px;
  9.          }
  10.          .top{
  11.              position: fixed;
  12.              right: 50px;
  13.              bottom: 100px;
  14.              display: none;
  15.          }
  16.      </style>
  17.  </head>
  18.  <body>
  19.      <div class="top" id="gotop">
  20.          <img src="data:images/Top.jpg" alt="">
  21.      </div>
  22.      <div>
  23.          <p>我是内容部分，有很多很多</p>
  24.          <p>我是内容部分，有很多很多</p>
  25.          <p>我是内容部分，有很多很多</p>
  26.          <p>我是内容部分，有很多很多</p>
  27.          <p>我是内容部分，有很多很多</p>
  28.          <p>我是内容部分，有很多很多</p>
  29.          <p>我是内容部分，有很多很多</p>
  30.          <p>我是内容部分，有很多很多</p>
  31.          <p>我是内容部分，有很多很多</p>
  32.          <p>我是内容部分，有很多很多</p>
  33.          <p>我是内容部分，有很多很多</p>
  34.          <p>我是内容部分，有很多很多</p>
  35.          <p>我是内容部分，有很多很多</p>
  36.          <p>我是内容部分，有很多很多</p>
  37.          <p>我是内容部分，有很多很多</p>
  38.          <p>我是内容部分，有很多很多</p>
  39.          <p>我是内容部分，有很多很多</p>
  40.          <p>我是内容部分，有很多很多</p>
  41.          <p>我是内容部分，有很多很多</p>
  42.          <p>我是内容部分，有很多很多</p>
  43.          <p>我是内容部分，有很多很多</p>
  44.          <p>我是内容部分，有很多很多</p>
  45.          <p>我是内容部分，有很多很多</p>
  46.          <p>我是内容部分，有很多很多</p>
  47.          <p>我是内容部分，有很多很多</p>
  48.      </div><!--内容部分-->
  49.  </body>
  50.  </html>
  51.  <script src="my.js" type="text/javascript"></script>
  52.  <script>
  53.      var goTop=$("gotop");
  54.      window.onscroll=function(){
  55.          scroll().top>0?show(goTop):hide(goTop);
  56.          leader=scroll().top;
  57.      }
  58.      var leader=0;
  59.      var target=0;
  60.      var timer=null;
  61.      goTop.onclick=function(){
  62.          target=0;//点击后 等于0
  63.          timer=setInterval(function(){
  64.              leader=leader+(target-leader)/10;
  65.              window.scrollTo(0,leader);
  66.              if(leader==target){
  67.                  clearInterval(timer);
  68.              }
  69.          },20)
  70.      }
  71.  </script>

4、屏幕滑动效果

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>屏幕滑动效果</title>
  6.      <style>
  7.          ul,ol{
  8.              list-style: none;
  9.          }
  10.          *{
  11.              margin: 0;
  12.              padding: 0;
  13.          }
  14.          html,body{
  15.              width: 100%;
  16.              height: 100%;
  17.          }
  18.          #ul{
  19.              width: 100%;
  20.              height: 100%;
  21.          }
  22.          ul li{
  23.              width: 100%;
  24.              height: 100%;
  25.              background-color: peachpuff;
  26.  
  27.          }
  28.          #ol{
  29.              position: fixed;
  30.              top:0;
  31.              left:50px;
  32.          }
  33.          #ol li{
  34.              width: 50px;
  35.              height: 50px;
  36.              border:1px solid #000;
  37.          }
  38.      </style>
  39.  </head>
  40.  <body>
  41.      <ul id="ul">
  42.          <li>首页</li>
  43.          <li>关注</li>
  44.          <li>动态</li>
  45.          <li>风格</li>
  46.          <li>作品</li>
  47.      </ul>
  48.      <ol id="ol">
  49.          <li>首页</li>
  50.          <li>关注</li>
  51.          <li>动态</li>
  52.          <li>风格</li>
  53.          <li>作品</li>
  54.      </ol>
  55.  </body>
  56.  </html>
  57.  <script src="my.js"></script>
  58.  <script>
  59.      var ulBox=$("ul");
  60.      var ulBoxli=ulBox.children;
  61.      var olBox=$("ol");
  62.      var olBoxli=olBox.children;
  63.      var bgColor=["pink","blue","yellow","green","orange"];
  64.      var leader=0;
  65.      var target=0;
  66.      var timer=null;
  67.      for(var i=0;i<ulBoxli.length;i++){
  68.          ulBoxli[i].style.backgroundColor=bgColor[i];
  69.          olBoxli[i].style.backgroundColor=bgColor[i];
  70.          olBoxli[i].index=i;//记录当前的索引号
  71.          olBoxli[i].onclick=function(){
  72.              clearInterval(timer);
  73.              target=ulBoxli[this.index].offsetTop;//重点
  74.              timer=setInterval(function(){
  75.                  leader=leader+(target-leader)/10;
  76.                  window.scrollTo(0,leader);//屏幕滑动
  77.              },20)
  78.          }
  79.      }
  80.  </script>

第50天：scrollTo小火箭返回顶部的更多相关文章

  1. jQuery---小火箭返回顶部案例

    小火箭返回顶部案例 1. 滚动页面,当页面距离顶部超出1000px,显示小火箭. 封装在scroll函数里,当前页面距离顶部为$(window).scrollTop >=1000 小火箭显示和隐 ...

  2. 小程序返回顶部top滚动

    wxjs const app = getApp(); Page({ data:{ // top标签显示(默认不显示) backTopValue:false }, // 监听滚动条坐标 onPageSc ...

  3. jQuery实现返回顶部

    由于项目需要,写了个返回顶部的小功能... /*返回顶部*/ function toTop() { $(".to_top").hide(); $(window).scroll(fu ...

  4. 添加“返回顶部”小图标按钮的JS(JavaScript)代码详解

    如何给自己的网站添加方便快捷的"返回顶部"小图标按钮呢?如下图: JS源代码: /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration ...

  5. 【微信小程序】实现类似WEB端【返回顶部】功能

    1.原理:利用小程序自带的<scroll-view>组件,该组件的bindScroll和scroll-top方法.属性进行联合操作 2.效果图: 3.wxml: <scroll-vi ...

  6. jQuery火箭图标返回顶部代码

    在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  7. DIY 博客全文界面的推荐、反对、加关注、返回顶部、快速评论等小功能的集成

    博客园已经很不错了,但作为比较“挑剔”的用户,在使用的过程中,还是有一些地方不爽的. 我不是一个专业的前台程序员,也只能凭借自己蹩脚的JS和CSS知识完成对页面的小改造(专业的大虾莫要鄙视呀..). ...

  8. 微信小程序ios点击状态栏返回顶部不好使

    最近做了一款微信小程序,各方面感觉都很完美(萝卜一直这么自信),今天设计总监告诉我你的小程序怎么返回顶部不好使呀,吓得我赶紧拿手机试试,没毛病啊,我手机(苦逼的安卓机)上点两下就回去了呀,遂去找他理论 ...

  9. 用jquery实现小火箭到页面顶部的效果

    恩,不知道之前在哪看过一个页面效果就是如果页面被滑动了就出现一个小火箭,点击这个小火箭就可以慢慢回到页面顶部,闲的没事,自己搞了一下 需要引入jquery 代码和布局都很简单 <!DOCTYPE ...

随机推荐

  1. BZOJ2600_ricehub_KEY

    题目传送门 这道题一开始我还以为是贪心,sort一遍直接取中点然后求最优值. 但写了之后才发现错误,设置的谷仓只要是一段区间的中点即可.这段区间的两端一定是两片谷田. 所以枚举区间的左端点,二分右端点 ...

  2. .net core 中后台获取前台 数据（post）的方法

    [HttpPost] public async Task<JsonResult> EditPoint() { Stream reqStream = Request.Body; string ...

  3. Java：xxx is not an enclosing class

    1. 错误原因 该错误一般出现在对内部类进行实例化时,例如 public class A{ public class B{ } } 此时B是A的内部类,如果我们要使用如下语句实例化一个B类的对象: A ...

  4. Intellij打包jar文件，“java.lang.SecurityException: Invalid signature file digest for Manifest main attrib

    下面是使用Intellij 打包jar文件的步骤,之后会有运行jar文件时遇到的错误. 打包完成. ================================================== ...

  5. spring源码-Aware-3.4

    一.Aware接口,这个也是spring的拓展之一,为啥要单独拿出来讲呢,因为他相比于BeanFactoryPostProcessor,BeanPostProcessor的实用性更加高,并且在具体的业 ...

  6. dubbo之注册管理中心

    一.在dubbo的框架中注册中心是必要的一个环节,这个也是分布式部署的一个必要环节.在dubbo的架构基本图中可以看出,基本上所有的服务都是通过注册中心进行注册,然后在通过注册中心,暴露出接口来. 二 ...

  7. python generator

    def reverse(data): for index in range(len(data)-1, -1, -1): yield data[index] for char in reverse('g ...

  8. gitlab-登录账户遇到ERROR: Permission to XXX.git denied to user报错怎么办

    碰到这个问题就意味着没有访问账户的权限,没有把访问电脑与访问账户用ssh_key关联起来,解决流程: 1.查看本地是否有ssh_key 笔者用的是git bash来输入命令 ls -al ~/.ssh ...

  9. selenium--driver.switchTo()

    在自动化测试中,会遇到多窗口.多iframe.多alert的情况.此时,会使用driver.switchTo()来解决. 下面时关于driver.switchTo()的详细介绍: 1.多windows ...

  10. ReadyAPI教程和示例（一）

    声明:如果你想转载,请标明本篇博客的链接,请多多尊重原创,谢谢! 本篇使用的 ReadyAPI版本是2.5.0 通过下图你可以快速浏览一下主要的ReadyAPI中SoapUI功能: ​ 一.创建一个功 ...