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

Posted 半指温柔乐

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第50天:scrollTo小火箭返回顶部相关的知识,希望对你有一定的参考价值。

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="images/top.png" alt="">
30         </div>
31         <div class="nav" id="Q-nav">
32             <img src="images/nav.png" alt="">
33         </div>
34         <div class="main">
35             <img src="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>
View Code

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="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>
View Code

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="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>
View Code

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>
View Code

 


以上是关于第50天:scrollTo小火箭返回顶部的主要内容,如果未能解决你的问题,请参考以下文章

jQuery火箭图标返回顶部代码

js---小火箭回到顶部

如何使用 JQuery $.scrollTo() 函数滚动窗口

回答顶部效果

小程序各种功能代码片段整理---持续更新

js实现返回顶部功能的解决方案