$(function () {
$('a[href*=#]:not([href=#])').click(function() {
var target = $(this.hash);
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
});
});
jquery是非常白話的語法ㄟ...
$(function(){
// jquery在DOM載入後執行 function(){...}
$('a[href*=#]:not([href=#])').click(function() {
// 選擇元素是<a>, 且href包含(*=)'#',但不是(not)'#'
// 當元素 $('a(...ry)')被按下(click)後執行 function(){...}
var target = $(this.hash);
// 設target為網址錨點(this.hash)元素
$('html,body').animate({
// 網頁(html,body)執行動畫(animate)
scrollTop: target.offset().top
// 向上捲動(scrollTop): 距離( target於網頁相對位置(offset)的y座標(top) )
}, 1000);
// 執行時間1000ms
return false; // 停止動作
}); // END $('a(...ry)').click
}); // END $(function(){
感覺你的問題是沒耐心... 下次遇到類似狀況:
基本上能接觸到的語法很白話了,認真讀一定能懂
往後還會有很多機會需要解讀程式,要懶請< br >
排除掉你對 jQuery 的不熟。
從你的程式碼還發現你對幾件事不熟,而這幾件事正好是開發者使用右腦的功能
$(function () {
$('a[href*=#]:not([href=#])').click(function() {
var target = $(this.hash);
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
});
});
幫你整理一下程式碼。如果可以,請這樣問問題,比較有人會願意回答。
以上
抱歉阿我這幾個月才開始學的...真的不是很懂我是直接從DW上複製下來的我以為貼上來也有縮排,我剩一個月要比技藝競賽真的還很多不懂的
可以先KK Chris大大
這次的鐵人賽主題可不可以不要寫糙扣系列,對你之後的程式入門有幫助!
細步分解說明給你看好了
$(function () { //這是jquery後運行的寫法,其實也是javascript的onload的一種應用
/*
'a[href*=#]:not([href=#])'這是一種jquery的元件指定寫法
詳細可參考 http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
這邊的選擇器的白話說法。就是找a元素中,href有包含#字的,但href不等於#
*/
$('a[href*=#]:not([href=#])').click(function() {
var target = $(this.hash); //hash的取值倒不是jquery才有的。但可以拿它來做直接定義元件的處理。也就是說,這裏就是在取得目標元件放到target上。
$('html,body').animate({ //animate是jquery一種動態的處理方法
scrollTop: target.offset().top //這裏就是去操作捲軸,到目標定義的top值
}, 1000);//動態時間,這邊設定的值是依(毫秒)為單元。也就是說1000毫秒 = 1秒。
/*
這是搭配animate作用的值。意思是我要做這個動作。需要多久時間才到達定位。
一般如果你不做animate動作的話。其實直接操作scroll的top。會變成瞬移。
裏設定個1秒。讓整個動作跑起來有滑動的感覺
*/
return false;//這邊為何要回傳個false。其目的是為了要制止a連結的觸發動作。你可以試著拿掉看看。動作會變得很奇怪。因為會有一個a連結的動作跟一個動態動作同時存在。基本上看到的就是瞬移了
});
});
以上的大部分解說明,希望你能夠明白。