今天闲来无事看着刷着bilibili对那锚点标记觊觎已久,下决心将其收为己用,遂动手.
个人主推Firefox+firebug查看网页代码.我用的是夜壶(nightly),就火狐的每日更新版(建议不用,有时一日三更重启非常蛋疼).
网页代码,css和图片容易弄,哪里想要点哪里,左边是代码,右边是css和其他,背景图的话,右键路径在新页面打开保存就行.
主要是绑定的javascript事件麻烦.楼主一开始傻BB就对着那个锚点的divid找啊找,找到了一些但死活找不到事件.后来firebug会用了就简单多了.点击标签绑定的是goTop函数,在firebug的控制栏里输入"goTop",然后点"RUN",那个函数就会出现了,找到之后还可以右键美化源代码,方便复制过去.输"goTop()"的话是执行.不一样的.
bilibili的锚点是挺有趣的, 首先其位置设置的不错,会根据元素在当前视口的相对偏移设置,其次是它让人流氓滚,在点了页面开始调用函数之后一旦你往下滚轮它还是会用生命滚到页首,直到完全触顶为止.
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title></title>
5 <script src="../Scripts/jquery-1.10.2.min.js"></script>
6 <script>
7 $(function () {
8 $('body').append('<div id="gotop" onclick="goTop();"></div>');
9 $(window).scroll(function () {
10 300 < $(this).scrollTop() ?
11 ($('#gotop').show(),
12 $('#gotop').css('left', $('.z').offset().left + $('.z').width() + 20),
13 $('#gotop').css('top', $(window).height() - 300))
14 : $('#gotop').hide()
15 });
16 $(window).resize(function () {
17 $('#gotop').css('left', $('.z').offset().left + $('.z').width() + 20)
18 })
19 });
20 function goTop(u, t, r) {
21 var scrollActivate = !0;
22 if (scrollActivate) {
23 u = u || 0.1;
24 t = t || 16;
25 var s = 0,
26 q = 0,
27 o = 0,
28 p = 0,
29 n = 0,
30 j = 0;
31 document.documentElement && (s = document.documentElement.scrollLeft || 0, q = document.documentElement.scrollTop || 0);
32 document.body && (o = document.body.scrollLeft || 0, p = document.body.scrollTop || 0);
33 n = window.scrollX || 0;
34 j = window.scrollY || 0;
35 s = Math.max(s, Math.max(o, n));
36 q = Math.max(q, Math.max(p, j));
37 p = 1 + u;
38 window.scrollTo(Math.floor(s / p), Math.floor(q / p));
39 0 < s || 0 < q ? window.setTimeout('goTop(' + u + ', ' + t + ')', t) : 'undefined' != typeof r && r()
40 } else {
41 scrollActivate = !0
42 }
43 }
44 </script>
45 <style>
46 #gotop:hover {
47 background-position: 0px -116px;
48 }
49
50 #gotop {
51 width: 29px;
52 height: 106px;
53 position: fixed;
54 display: none;
55 cursor: pointer;
56 background: url('go_to_top.png') no-repeat scroll 0px 0px transparent;
57 }
58 </style>
59 </head>
60 <body>
61 <div class="z" style="border: 1px dashed; height: 2999px; width: 977px; margin: 0 auto;">
62 </div>
63 </body>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title></title>
5 <script src="../Scripts/jquery-1.10.2.min.js"></script>
6 <script>
7 $(function () {
8 $('body').append('<div id="gotop" onclick="goTop();"></div>');
9 $(window).scroll(function () {
10 300 < $(this).scrollTop() ?
11 ($('#gotop').show(),
12 $('#gotop').css('left', $('.z').offset().left + $('.z').width() + 20),
13 $('#gotop').css('top', $(window).height() - 300))
14 : $('#gotop').hide()
15 });
16 $(window).resize(function () {
17 $('#gotop').css('left', $('.z').offset().left + $('.z').width() + 20)
18 })
19 });
20 function goTop(u, t, r) {
21 var scrollActivate = !0;
22 if (scrollActivate) {
23 u = u || 0.1;
24 t = t || 16;
25 var s = 0,
26 q = 0,
27 o = 0,
28 p = 0,
29 n = 0,
30 j = 0;
31 document.documentElement && (s = document.documentElement.scrollLeft || 0, q = document.documentElement.scrollTop || 0);
32 document.body && (o = document.body.scrollLeft || 0, p = document.body.scrollTop || 0);
33 n = window.scrollX || 0;
34 j = window.scrollY || 0;
35 s = Math.max(s, Math.max(o, n));
36 q = Math.max(q, Math.max(p, j));
37 p = 1 + u;
38 window.scrollTo(Math.floor(s / p), Math.floor(q / p));
39 0 < s || 0 < q ? window.setTimeout('goTop(' + u + ', ' + t + ')', t) : 'undefined' != typeof r && r()
40 } else {
41 scrollActivate = !0
42 }
43 }
44 </script>
45 <style>
46 #gotop:hover {
47 background-position: 0px -116px;
48 }
49
50 #gotop {
51 width: 29px;
52 height: 106px;
53 position: fixed;
54 display: none;
55 cursor: pointer;
56 background: url('go_to_top.png') no-repeat scroll 0px 0px transparent;
57 }
58 </style>
59 </head>
60 <body>
61 <div class="z" style="border: 1px dashed; height: 2999px; width: 977px; margin: 0 auto;">
62 </div>
63 </body>
64 </html>
