2012-04-22 5 views
0

javascriptに関しては私は完全に初心者ですので、私はあなたの助けを求めています。クリックするとdivにスクロールするためのJavascript

私のマークアップは、このようなものです:

<body > 

<div class="header_link"> 

<h1 style="clear:both; padding:5px;">Smooth Scroll by Dezinerfolio</h1> 

<a name="top" href="#footer">GO TO FOOTER</a> 
<a href="#middle">GO TO MIDDLE</a> 

    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec diam magna, consequat non, adipiscing quis, congue a, mauris. Duis convallis leo quis metus. </p> 
</div> 


<div class="middle_link"> 

<a name="middle" href="#top">GO TO TOP</a> 
<a href="#footer">GO TO FOOTER</a> 

    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec diam magna, consequat non, adipiscing quis, congue a, mauris. Duis convallis leo quis metus. </p> 
</div> 

<div class="footer_link"> 

<a name="footer" href="#top">GO TO HEADER</a> 
<a href="#middle">GO TO MIDDLE</a> 

    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec diam magna, consequat non, adipiscing quis, congue a, mauris. Duis convallis leo quis metus. </p> 
</div> 

</body> 

私が欲しいもの訪問者がそのperticularボタンをクリックすると、ページがそのperticular divにをスクロール/ゆっくりとスムーズになければならないです。

jQueryとMooToolsには多くのプラグインがありますが、これは私のサイトで必要とされる唯一のjavascript関数であり、残りはすべてプレーンなCSSアクティビティであるため、使用したくありません。したがって、この小さな機能を実現するために、60〜100 KBのJavaScriptライブラリ(jQueryまたはMooTools)全体をロードするポイントはありません。 シンプルなプレーンJavaScript関数をお探しですか?

親切に助けてください!

+0

あなたは ' hjpotter92

+0

jQueryが必要ですか? (ちょうどjQuery) –

+0

@Derek上記のように.....私はjQueryとMooToolsに多くのプラグインがあることを知っていますが、これは私のサイトで要求される唯一のjavascript関数であり、残りはすべて平易なCSSの活動。したがって、この小さな機能を実現するために、60〜100 KBのライブラリ全体をロードするポイントはありません。 –

答えて

0

を "私はシンプルな無地のJavaScript機能を探しています"

この問題に対する単純なプレーンなJavascriptソリューションはありません。 Javascriptは "scrollTo"関数を提供しますが、スムーズまたはスローではなく、即座にスクロールします。

さまざまなブラウザをサポートする必要がある場合は、jQueryを使用する必要があります。このようなアニメーションはjQueryのためのものであり、多くの人々がjQueryのこの機能を使いやすく、優れたパフォーマンスを発揮できるように努力してきました。この機能を自分で複製することは、あなたの時間を有効に活用するものではありません。

You これはCSS3トランジションで簡単に実行できますが、IEではサポートされていません(まだ)。 IEについて気にしないなら、これは優れた解決策でもあります。

+0

私が知る限り、トランジションでスクロールすることはできません。しかしそれとは別に私は同意します - これは図書館のものです – AHM

関連する問題