- 注意：
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>
沒有留言:
張貼留言