我有這樣的代碼Fiddle

HTML

<a id="up" href="#down">down</a> 
<div class="up"></div> 

<a id="down" href="#up">up</a> 
<div class="down"></div>

CSS

.up { 
    width:100px; 
    height: 600px; 
    background-color: red; 
} 

.down { 
    width:100px; 
    height: 400px; 
    background-color: yellow; 
}

我知道:target可以幫助，但我不知道如何與transition使用。

來源

2014-03-07 Youssef

我認爲這個問題的答案和一個@sidney標記可能重複的是什麼「滾動」是模糊的。 'transition'效果只對改變位置有幫助（注意：不滾動位置），所以並不像'Skrollr'或Jquery –

您可以使用純CSS做到這一點，但您需要對偏移滾動量進行硬編碼，如果您要更改頁面內容，或者您的內容維度在改變窗口大小時發生變化，這可能並不理想。

您可能最適合使用例如jQuery的，具體有：

$('html, body').stop().animate({ 
    scrollTop: element.offset().top 
}, 1000);

一個完整的實現可以是：

$('#up, #down').on('click', function(e){ 
    e.preventDefault(); 
    var target= $(this).get(0).id == 'up' ? $('#down') : $('#up'); 
    $('html, body').stop().animate({ 
     scrollTop: target.offset().top 
    }, 1000); 
});

凡element是目標元件滾動並1000是在完成之前毫秒的延遲。

Demo Fiddle

好處之中，不管什麼樣的變化，以您的內容方面，該功能將不需要改變。

來源

2014-03-07 09:59:48 SW4

那樣'滾動'，謝謝它在Fiddle中很好用，但是你能解釋一下'scrollTop： element.offset（）。top'，爲什麼它是'top'或'scrollTop'？我看不到「下」。 – Youssef

在小提琴中，該函數計算出兩個鏈接元素中的哪一個被點擊，然後將「target」元素設置爲相反的一個，頁面被滾動到該「目標」的頂部 – SW4

但是當我們點擊'down'我們必須'scrollDown'而不是'scrollTop'。 – Youssef

您需要使用target選擇器。

這裏是另一個例子小提琴：http://jsfiddle.net/YYPKM/3/

來源

2014-03-07 10:03:38 sidney

但如果我改變我的DIV的高度會更困難。 – Youssef

你應該這樣做，如果你只想要純粹的CSS。 – sidney

是的，這是價格 – Youssef

只用純css平滑滾動

回答

Demo Fiddle

只用純css平滑滾動

回答

Demo Fiddle

相關問題