Code Learning: 超連結 Html anchor link & jQuery animate scrollTop 滑動

1.Html anchor link

- 注意：
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>

Code Learning

2016年9月1日星期四

超連結 Html anchor link & jQuery animate scrollTop 滑動

沒有留言:

張貼留言

2016年9月1日 星期四

超連結 Html anchor link & jQuery animate scrollTop 滑動

沒有留言:

張貼留言

2016年9月1日星期四