- 注意:
a.目前anchor都已改為id="myTestAnchor"設定
b.name="id="myTestAnchor"的設定名義上已取消,
但依然可以使用(name 只能跟<a name="myTestAnchor">test</a>搭配)
-範例:
a.設定連結(要連到哪裡??)
- <a href="#mytest">按我Html超連結</a>
b.設定anchor(錨點)
- <h1 id="mytest">超連結終點</h1>
2.jQuery animate + scrollTop 超連結滑動
- 注意:
a. 選取 class 為 "intro"、"demo" 或 "end" 的所有元素:$(".intro,.demo,.end")
b. $('#test').offset().top 為 利用 .offset() 的方式來取得指定元素的 top 位置
-範例:
a. 功能:當id="myClick"元素被點擊時,滑動到id="test"的元素上面
b.. offset().top-100:可以控制滑動後畫面要停止在哪裡,不一定要把該元素升到最頂
c.範例程式碼:
- $(function(){
- $('#myClick').click(function(){
- $('html , body').animate({scrollTop:$('#test').offset().top-100},800);
- });
- });
3.完整範例
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <link rel="stylesheet" href="">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
- <script src=""></script>
- <title>aaa</title>
- <script>
- $(function(){
- $('#myClick').click(function(){
- $('html , body').animate({scrollTop:$('#test').offset().top-100},800);
- });
- });
- </script>
- </head>
- <body>
- <button id="myClick">按我jQuery滑動</button>
- <a href="#mytest">按我Html超連結</a>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- <h1 id="test">滑動終點</H1>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- <h1 id="mytest">超連結終點</H1>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </br>
- </body>
- </html>
沒有留言:
張貼留言