jQuery.scrollIntoView/demo.html at master · leonardo-fernandes/jQuery.scrollIntoView · 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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jquery.scrollIntoView.js Demo</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  <script src="jquery.scrollIntoView.js"></script>

  <script>
      //main script
      $(function(){

         $('a[href^="#"]').click(function(e) {
             e.preventDefault();

             var href = $(this).attr('href');

             // scroll into view
             $(href).scrollIntoView(!!$("#anim").attr("checked"));

             // some sort of highlight
             $('section>div:not("'+href+'")').animate({opacity:0.3},10);
             $(href).animate({opacity:1},100);
         });

      });
  </script>

  <style>
      /* mini reset */
      html,body,div,span,article,aside,header,hgroup,menu,nav,ul,section,h1,h2 { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent }
      body { line-height:1 }
      article,aside,footer,header,hgroup,menu,nav,section { display:block }
      nav>ul { list-style:none }

      /* page specific */
      h2 { font-size: 90% }
      aside { position: fixed; width: 240px; margin: 10px;}
      aside>nav,nav>ul { margin-top: 10px; }
      section { position: absolute; top: 50px; left: 190px; right:0; height:356px; overflow-y:scroll }
      section>div { height:100px; background: #eee; border: 1px solid #999 }
  </style>
</head>
<body>

  <aside>
    <hgroup>
        <h1>jquery.scrollIntoView.js</h1>
        <h2><a href="https://github.com/leonardo-fernandes/jQuery.scrollIntoView">@github/leonardo-fernandes</a></h2>
    </hgroup>
    <nav>
      <input id="anim" type="checkbox" checked>animate</input>
      <ul>
        <li><a href="#A">Show A</a></li>
        <li><a href="#B">Show B</a></li>
        <li><a href="#C">Show C</a></li>
        <li><a href="#D">Show D</a></li>
        <li><a href="#E">Show E</a></li>
        <li><a href="#F">Show F</a></li>
        <li><a href="#B,#C">Show B&C</a></li>
        <li><a href="#C,#D">Show C&D</a></li>
        <li><a href="#D,#E">Show D&E</a></li>
        <li><a href="#B,#C,#D">Show B&C&D</a></li>
        <li><a href="#C,#D,#E">Show C&D&E</a></li>
        <li><a href="#B,#C,#D,#E">Show B&C&D&E</a></li>
        <li><a href="#A,#B,#C,#D,#E">Show A&B&C&D&E</a></li>
      </ul>
    </nav>
  </aside>

  <section>
    <div id="A">A</div>
    <div id="B">B</div>
    <div id="C">C</div>
    <div id="D">D</div>
    <div id="E">E</div>
    <div id="F">F</div>
  </section>
</body>
</html>