ユーザーがリンクをクリックしたときに上部からスクロールするdivを作成する方法は？</p> <p><a href="http://heydays.no/" rel="nofollow">Heydays.no</a></p> <p>をあなたがこのリンクを訪問する場合は、上位に小さいアイコンのいずれかをクリックします。

Question

私はあなたがリンクをクリックしたときに私は、このウェブサイトが達成される効果を再現することができますいくつかのJSを書きたいですページの右隅に、jsで達成したい効果が表示されます。私はこれがjsアクションを持つ何らかの種類の隠れたまたは再配置されたdivだと仮定します。

助けていただければ幸いです。 ありがとうございました。

Answer 1

アニメーションを使用してdivを表示することは実際上スクロールしていません。そこにはいくつかのJSライブラリーがあり、自分で書くことなくこれを手伝うことができます。 JQueryとScriptaculousを見てください。両方ともあなたが見ることができる素晴らしい例があります。 そのサイトはJQueryを使用しています。

Answer 2

あなたはCSS3のトランジションでこれを行うことができます：

#sliding_div { 
    /* must have a set height to work */ 
    -webkit-transition: height 2s ease; 
    -moz-transition: height 2s ease; 
    -o-transition: height 2s ease; 
    transition: height 2s ease; 
} 

そうのようなdiv要素で：

<div style="height: 0px;" id="sliding_div"><!-- content --></div> 
<div onclick="var sliding_div = document.getElementById('sliding_div'); if (sliding_div.style.height == '0px') sliding_div.style.height = '300px'; else sliding_div.style.height = '0px';"><img /></div> 

のみIE10は、IE9として、ここでスライド効果を生成し、ドンの下になることを覚えておいてください」現在アフリカの移行をサポートしています。ボタンを押すだけでdivが「スナップ」され、これらのブラウザで閉じられます。

Answer 3

基本的には、いくつかの情報を含んだ隠しdivがあり、jQueryメソッド.hide（）が呼び出されています。ユーザーがこれらのリンクの1つをマウスでクリックすると、divはjQueryメソッドの.show（）を使用して呼び出されます。彼らのバージョンは、カスタムスクリプトで行われます。