jquery-offset-scroller/example.html at master · masonhale/jquery-offset-scroller · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.offset-scroller.js"></script>
<style>

   body {
     background-color: #e2e2e2;
     margin: 0;
     padding: 1px;
     font-family: Helvetica, Arial, sans-serif;
   }

   .box {
      height: 400px;
      border: 8px solid #ccc;
      margin-bottom: 30px;
      padding: 30px;
   }

   #top {
      margin: 0;
      top: 0;
      position: fixed;
      height: 50px;
      padding: 20px;
      width: 100%;
      background-color: rgba(255,255,255,1);
      box-shadow: 0px 2px 4px 0px rgba(50, 50, 50, 0.5);
   }
   #top h3 {
      margin-top: 0px;
      padding: 0;
      margin-bottom: 10px;
   }

   #buffer {
      background-color: #ff0000;
      height: 90px; /* 50 height + 20x2 padding */
      padding: 0;
      margin: 0;
   }
</style>
</head>
<body>
<div id="top">
<h3>jQuery offsetScroller demo</h3>
<div id="scroll-me">
<a href="#box-1">Box 1</a> |
<a href="#box-2">Box 2</a> |
<a href="#box-3">Box 3</a> |
<a href="#box-4">Box 4</a> |
<a href="#box-5">Box 5</a> |
<a href="#box-6">Box 6</a> |
<a href="#box-7">Box 7</a> |
<a href="#box-8">Box 8</a> |
<a href="http://teamtopia.com">External link</a> |
<a href="#{^&,]">Invalid link</a>
</div>
</div>
<div id="buffer"></div>
<div class="box" id="box-1">
   <h1>Box 1</h1>
   <a href="#buffer">Back to top</a>
</div>
<div class="box" id="box-2">
   <h1>Box 2</h1>
   <a href="#buffer">Back to top</a>
</div>
<div class="box" id="box-3">
   <h1>Box 3</h1>
   <a href="#buffer">Back to top</a>
</div>
<div class="box" id="box-4">
   <h1>Box 4</h1>
   <a href="#buffer">Back to top</a>
</div>
<div class="box" id="box-5">
   <h1>Box 5</h1>
   <a href="#buffer">Back to top</a>
</div>
<div class="box" id="box-6">
   <h1>Box 6</h1>
   <a href="#buffer">Back to top</a>
</div>
<div class="box" id="box-7">
   <h1>Box 7</h1>
   <a href="#buffer">Back to top</a>
</div>
<div class="box" id="box-8">
   <h1>Box 8</h1>
   <a href="#buffer">Back to top</a>
</div>
<script>
   // attach offsetScroll to target elements
   $(document).ready(function() {
     $('#scroll-me a').offsetScroller({offsetPixels: 92});
     $('.box a').offsetScroller({animationSpeed: 2000});
     // to enable for all anchor links...
     //$('a[href*="#"]:not([href="#"])').offsetScroller({offsetPixels:92});
     $().offsetScroller.scrollToHash(window.location.hash, {offsetPixels: 92});
   });
</script>
</body>
</html>