使用最小標記和散列標記簡單「滾動/向下」效果

我正在製作一個頁面頂部具有經典導航的網站。現在，我已經建立了哈希標籤，以便在頁面內導航鏈接：使用最小標記和散列標記簡單「滾動/向下」效果

<nav> 
<a href="#about">About</a> 
</nav> 
... 
<section id="about">...</section>

顯然，這工作，但跳的有關部分是即時的，而不是漸進的。我正在尋找一個非常簡單的實現，以便逐步過渡。我不想要任何幻想。沒有軸，偏移量或其他選項。我只是希望滾動過渡是漸進的。我想要的唯一設置是完成滾動所需的時間。此外，我想對我的標記做幾乎沒有改變。我已經看到了幾個JavaScript插件，需要您使用錨標籤來設置HTML文檔中的位置 - 我不希望這樣。 This site看起來很有希望，但我不知道如何設置它。沒有演示，所以我不知道如何設置它。我不是那種在Javascript中識字的人。此外，jQuery的ScrollTo plugin太複雜了。我願意使用一個有很多選項的插件，但我只是不想讓這些選項阻止我找出如何設置它。

任何幫助將不勝感激！

來源

2012-05-01 davecave

這是我發現做到這一點的最佳方式 - 它只是使用普通錨，而是延伸其功能

$('a').click(function() { 
    var elementClicked = $(this).attr("href"); 
    var destination = $(elementClicked).offset().top; 
    $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-15}, 500); 
});

這裏是一個live example

來源

2012-05-01 20:06:55 jacktheripper

HTML標記會是什麼樣子，我該如何實現它？ – davecave

看到這個例子http://jsfiddle.net/jackdent/Z8XDG/ – jacktheripper

這是完美的，除非我似乎無法在小提琴中使用javascript複製我的網站上的效果。我相信這是我的一個小錯誤。如何使用onLoad在javascript中編寫？我把它放在標題中嗎？測試網站 - http：//test.davewhitley。com/not-wp/kate/ – davecave

我用直jquery來做到這一點。

我有一個鏈接，像這樣 - >

<a href="1" class="scrolling">Go to 1</a>

然後使用jQuery它會向下滾動到一個div id爲「1」

$("a.scrolling").click(function(e) { 
    e.preventDefault(); 
    goToByScroll($(this).attr("href")); 
}); 

function goToByScroll(id) { 
    $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');        
}

來源

2012-05-01 20:04:07 Undefined

+1但如果您使用的是jQuery，請正確附加事件。使用'onclick'屬性可以讓我的皮膚抓取。 –

當然，讓我更新我的答案:) – Undefined

我不希望使用錨標籤來設置結束位置。 – davecave

另一個錨有ScrollTo在Javascript。這是一個窗口事件。看看這裏： https://developer.mozilla.org/en/DOM/window.scrollTo

來源

2012-05-01 20:05:33

[-1不夠jQuery]（http://www.doxdesk.com/img/updates/20091116-so-large.gif）呵呵 –

我發現這個代碼通過互聯網，同時尋找一個快速的方式來創建此滾動效果。

HTML代碼：

<a href="#services">Jump to services</a> 
<div id="services"></div>

jQuery代碼：

$(document).ready(function(){ 
$('a[href^="#"]').on('click',function (e) { 
    e.preventDefault(); 

    var target = this.hash, 
    $target = $(target); 

    $('html, body').stop().animate({ 
     'scrollTop': $target.offset().top 
    }, 900, 'swing', function() { 
     window.location.hash = target; 
    }); 
});

}）;

這是Code source。

來源

2014-06-02 21:42:25 Alex

使用最小標記和散列標記簡單「滾動/向下」效果

回答

相關問題