HTML+jQuery 點擊滑動到頁面的指定位置

實現效果

效果1：點擊標簽跳轉到頁面的指定位置

效果2：當頁面滑動到相應位置時導航欄樣式改變

 

效果如下：

 

方法：

使用scrollTop進行定位和跳轉。

首先，在HTML中給跳轉到的結點設置id

<div class="title" id="history">History</div>

<div class="history">
</div>

<div class="title" id="crafts">Crafts</div>

 

然后在js中設置點擊事件，點擊導航欄的按鈕使窗口跳轉指定位置。

scrollTop() 方法返回或設置匹配元素的滾動條的垂直位置。在這里使用scrollTop設置html和body元素相對滾動條頂部的距離。

距離計算使用offset().top。offset() 方法返回或設置匹配元素相對於文檔的偏移（位置）。在這里會offset().top會得到指定元素距離頂部的距離。

可以根據想要的效果增加或減去一定的數值，這里為了讓標題漏出來減去了100。單位通常均為px。

 

為了添加屏幕滑動到相應位置的動畫效果，給元素添加動畫和動畫時間。

js原碼如下：

$('#nav-intro').click(function() {
    $('html,body').animate({ scrollTop: $("#intro").offset().top - 8 }, 200)
});
$('#nav-history').click(function() {
    $('html,body').animate({ scrollTop: $("#history").offset().top - 100 }, 200)
});
$('#nav-crafts').click(function() {
    $('html,body').animate({ scrollTop: $("#crafts").offset().top - 100 }, 200)
});

 

還可以使用scrollTop似的屏幕滑動到相應的位置的時候，導航欄樣式改變。

使用srcollTop()獲取當前窗口和滾動條頂部的距離，使用判斷條件和addClass，removeClass實現。

js代碼如下：

$(window).scroll(function() {
    var len = $(window).scrollTop();
    var lenH = $("#history").offset().top - 100;
    var lenC = $("#crafts").offset().top - 100;
    if (len < lenH) {
        $('#nav-intro').addClass("location");
        $('#nav-history').removeClass("location");
        $('#nav-crafts').removeClass("location");
    } else if (len >= lenH && len < lenC) {
        $('#nav-intro').removeClass("location");
        $('#nav-history').addClass("location");
        $('#nav-crafts').removeClass("location");
    } else if (len >= lenC) {
        $('#nav-intro').removeClass("location");
        $('#nav-history').removeClass("location");
        $('#nav-crafts').addClass("location");
    }
})

*為了讓剛打開網頁時導航欄樣式改變生效，可在window.onload函數中添加相同的代碼。