第50天：scrollTo小火箭返回顶部

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

1、固定导航栏

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>固定导航栏</title>

     <script src="my.js" type="text/javascript"></script>

     <style>

       *{

           margin: 0;

           padding: 0;

       }

        img{

            vertical-align: top;

        }

         .main{

             margin: 0 auto;

             width: 1000px;

             margin-top: 10px;

         }

         .fixed{

             position: fixed;

             top:0;

             left:0;

         }

     </style>

 </head>

 <body>

         <div class="top" id="Q-top">

             <img src="data:images/top.png" alt="">

         </div>

         <div class="nav" id="Q-nav">

             <img src="data:images/nav.png" alt="">

         </div>

         <div class="main">

             <img src="data:images/main.png" alt="">

         </div>

 </body>

 </html>

 <script>

     var nav=$("Q-nav");

     var navTop=nav.offsetTop;//导航栏距离顶部的距离

     //alert(navTop);

     window.onscroll=function(){

         //console.log(scroll().top);

         if(scroll().top>=navTop){

             nav.className="nav fixed";

         }else{

             nav.className="nav";

         }

     }

 </script>

2、鼠标移动跟随的广告

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>跟随的广告</title>

     <style>

         img{

             position: absolute;

             top:50px;

             left:0;

         }

         .txt{

             width: 200px;

             margin: 0 auto;

         }

     </style>

 </head>

 <body>

     <img src="data:images/aside.jpg" alt="" id="ad">

     <div class="txt" id="txt">

         <p>好好学习，天天向上</p>

         <p>天天奋斗，天天快乐</p>

         <p>好好学习，天天向上</p>

         <p>天天奋斗，天天快乐</p>

         <p>好好学习，天天向上</p>

         <p>天天奋斗，天天快乐</p>

         <p>好好学习，天天向上</p>

         <p>天天奋斗，天天快乐</p>

         <p>好好学习，天天向上</p>

         <p>天天奋斗，天天快乐</p>

         <p>好好学习，天天向上</p>

         <p>天天奋斗，天天快乐</p>

         <p>好好学习，天天向上</p>

         <p>天天奋斗，天天快乐</p>

         <p>好好学习，天天向上</p>

         <p>天天奋斗，天天快乐</p>

         <p>好好学习，天天向上</p>

         <p>天天奋斗，天天快乐</p>

         <p>好好学习，天天向上</p>

         <p>天天奋斗，天天快乐</p>

         <p>好好学习，天天向上</p>

         <p>天天奋斗，天天快乐</p>

         <p>好好学习，天天向上</p>

         <p>天天奋斗，天天快乐</p>

     </div>

 </body>

 </html>

 <script src="my.js" type="text/javascript"></script>

 <script>

     window.onload=function(){

         var ad=$("ad");

         var leader=0;

         var target=0;

         var timer=null;//定时器

         var top=ad.offsetTop;

         window.onscroll=function(){

             target=scroll().top+top;//把最新的scrollTop给target

             timer=setInterval(function(){

                 leader=leader+(target-leader)/10;

                 ad.style.top=leader+'px';

             },30)

         }

     }

 </script>

3、小火箭返回顶部

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         body{

             width: 2000px;

         }

         .top{

             position: fixed;

             right: 50px;

             bottom: 100px;

             display: none;

         }

     </style>

 </head>

 <body>

     <div class="top" id="gotop">

         <img src="data:images/Top.jpg" alt="">

     </div>

     <div>

         <p>我是内容部分，有很多很多</p>

         <p>我是内容部分，有很多很多</p>

         <p>我是内容部分，有很多很多</p>

         <p>我是内容部分，有很多很多</p>

         <p>我是内容部分，有很多很多</p>

         <p>我是内容部分，有很多很多</p>

         <p>我是内容部分，有很多很多</p>

         <p>我是内容部分，有很多很多</p>

         <p>我是内容部分，有很多很多</p>

         <p>我是内容部分，有很多很多</p>

         <p>我是内容部分，有很多很多</p>

         <p>我是内容部分，有很多很多</p>

         <p>我是内容部分，有很多很多</p>

         <p>我是内容部分，有很多很多</p>

         <p>我是内容部分，有很多很多</p>

         <p>我是内容部分，有很多很多</p>

         <p>我是内容部分，有很多很多</p>

         <p>我是内容部分，有很多很多</p>

         <p>我是内容部分，有很多很多</p>

         <p>我是内容部分，有很多很多</p>

         <p>我是内容部分，有很多很多</p>

         <p>我是内容部分，有很多很多</p>

         <p>我是内容部分，有很多很多</p>

         <p>我是内容部分，有很多很多</p>

         <p>我是内容部分，有很多很多</p>

     </div><!--内容部分-->

 </body>

 </html>

 <script src="my.js" type="text/javascript"></script>

 <script>

     var goTop=$("gotop");

     window.onscroll=function(){

         scroll().top>0?show(goTop):hide(goTop);

         leader=scroll().top;

     }

     var leader=0;

     var target=0;

     var timer=null;

     goTop.onclick=function(){

         target=0;//点击后 等于0

         timer=setInterval(function(){

             leader=leader+(target-leader)/10;

             window.scrollTo(0,leader);

             if(leader==target){

                 clearInterval(timer);

             }

         },20)

     }

 </script>

4、屏幕滑动效果

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>屏幕滑动效果</title>

     <style>

         ul,ol{

             list-style: none;

         }

         *{

             margin: 0;

             padding: 0;

         }

         html,body{

             width: 100%;

             height: 100%;

         }

         #ul{

             width: 100%;

             height: 100%;

         }

         ul li{

             width: 100%;

             height: 100%;

             background-color: peachpuff;

         }

         #ol{

             position: fixed;

             top:0;

             left:50px;

         }

         #ol li{

             width: 50px;

             height: 50px;

             border:1px solid #000;

         }

     </style>

 </head>

 <body>

     <ul id="ul">

         <li>首页</li>

         <li>关注</li>

         <li>动态</li>

         <li>风格</li>

         <li>作品</li>

     </ul>

     <ol id="ol">

         <li>首页</li>

         <li>关注</li>

         <li>动态</li>

         <li>风格</li>

         <li>作品</li>

     </ol>

 </body>

 </html>

 <script src="my.js"></script>

 <script>

     var ulBox=$("ul");

     var ulBoxli=ulBox.children;

     var olBox=$("ol");

     var olBoxli=olBox.children;

     var bgColor=["pink","blue","yellow","green","orange"];

     var leader=0;

     var target=0;

     var timer=null;

     for(var i=0;i<ulBoxli.length;i++){

         ulBoxli[i].style.backgroundColor=bgColor[i];

         olBoxli[i].style.backgroundColor=bgColor[i];

         olBoxli[i].index=i;//记录当前的索引号

         olBoxli[i].onclick=function(){

             clearInterval(timer);

             target=ulBoxli[this.index].offsetTop;//重点

             timer=setInterval(function(){

                 leader=leader+(target-leader)/10;

                 window.scrollTo(0,leader);//屏幕滑动

             },20)

         }

     }

 </script>

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

jQuery---小火箭返回顶部案例
小火箭返回顶部案例 1. 滚动页面,当页面距离顶部超出1000px,显示小火箭. 封装在scroll函数里,当前页面距离顶部为$(window).scrollTop >=1000 小火箭显示和隐 ...
小程序返回顶部top滚动
wxjs const app = getApp(); Page({ data:{ // top标签显示(默认不显示) backTopValue:false }, // 监听滚动条坐标 onPageSc ...
jQuery实现返回顶部
由于项目需要,写了个返回顶部的小功能... /*返回顶部*/ function toTop() { $(".to_top").hide(); $(window).scroll(fu ...
添加“返回顶部”小图标按钮的JS(JavaScript)代码详解
如何给自己的网站添加方便快捷的"返回顶部"小图标按钮呢?如下图: JS源代码: /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration ...
【微信小程序】实现类似WEB端【返回顶部】功能
1.原理:利用小程序自带的<scroll-view>组件,该组件的bindScroll和scroll-top方法.属性进行联合操作 2.效果图: 3.wxml: <scroll-vi ...
jQuery火箭图标返回顶部代码
在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
DIY 博客全文界面的推荐、反对、加关注、返回顶部、快速评论等小功能的集成
博客园已经很不错了,但作为比较“挑剔”的用户,在使用的过程中,还是有一些地方不爽的. 我不是一个专业的前台程序员,也只能凭借自己蹩脚的JS和CSS知识完成对页面的小改造(专业的大虾莫要鄙视呀..). ...
微信小程序ios点击状态栏返回顶部不好使
最近做了一款微信小程序,各方面感觉都很完美(萝卜一直这么自信),今天设计总监告诉我你的小程序怎么返回顶部不好使呀,吓得我赶紧拿手机试试,没毛病啊,我手机(苦逼的安卓机)上点两下就回去了呀,遂去找他理论 ...
用jquery实现小火箭到页面顶部的效果
恩,不知道之前在哪看过一个页面效果就是如果页面被滑动了就出现一个小火箭,点击这个小火箭就可以慢慢回到页面顶部,闲的没事,自己搞了一下需要引入jquery 代码和布局都很简单 <!DOCTYPE ...

随机推荐

go基础语法-循环语句
1.基础定义 for语句的条件不需要括号(同if语句) ,golang里的循环只有for,没有while sum := 0 for i=0;i<100;i++ { sum += i } 2.条件 ...
【LG1975】[国家集训队]排队
[LG1975][国家集训队]排队题面洛谷题解又是一个偏序问题显然$CDQ$ 交换操作不好弄怎么办? 可以看成两次删除两次插入排序问题要注意一下代码 #include <ios ...
基于Kafka的服务端用户行为日志采集
本文来自网易云社区作者:李勇背景随着互联网的不断发展,用户所产生的行为数据被越来越多的网站重视,那么什么是用户行为呢?所谓的用户行为主要由五种元素组成:时间.地点.人物.行为.行为对应的内容.为 ...
2019年猪年海报PSD模板-第二部分
14套精美猪年海报,免费猪年海报,下载地址:百度网盘,https://pan.baidu.com/s/1sH0U5oU-LQlaxnaWxPCrrg
php单例模式和工厂模式
单例模式:防止重复实例化,避免大量的new操作,减少消耗系统和内存的资源,使得有且仅有一个实例对象 header("Content-type: text/html; charset=utf- ...
python3 爬虫爬取深圳公租房轮候库（深圳房网）
深圳公租房轮候库已经朝着几十万人的规模前进了,这是截至16年10月之前的数据了,贴上来大家体会下所以17年已更新妥妥的10W+ 今天就拿这个作为爬虫的练手项目 1.环境准备: 操作系统:win10 ...
关于java获取网页内容
最近项目需求,做一些新闻站点的爬取工作.1.简单的jsoup爬取,静态页面形式: String url="a.atimo.cn";//静态页面链接地址Document doc = ...
TW实习日记：第29-30天
这两天挺忙,赶工期,改bug.项目现场的同事说客户火大得不行.可是谁叫你们谈工期谈的这么紧,完全不考虑开发的情况,真的是烦人这种事情.这两天遇到的最有难度的一个点就是附件预览,搞这个改到晚上11点. ...
Django学习总结①
Django基础环境配置好以后,打开pycharm,创建Django项目视图views 中需要导入 django.http ---> HttpResponse models库 - 常用方法: ...
STL之--插入迭代器（back_inserter,inserter,front_inserter的区别）
除了普通迭代器,C++标准模板库还定义了几种特殊的迭代器,分别是插入迭代器.流迭代器.反向迭代器和移动迭代器,定义在<iterator>头文件中,下面主要介绍三种插入迭代器(back_in ...

第50天：scrollTo小火箭返回顶部

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

随机推荐

热门专题