0

私は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>

私が望むのは、訪問者がその特定のボタンをクリックすると、ページがその特定のボタンまでスムーズに/ゆっくりとスクロールすることですdiv。

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

助けてください！

4

2 に答える 2

3

jQuery のソースを見て、それがどのように行われているかを確認できます。

あるいは、Google は有望に見えるこれらのページについて教えてくれました。

于 2012-04-22T05:39:54.400 に答える
0

「シンプルでプレーンな JavaScript 関数を探しています」

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

幅広いブラウザをサポートする必要がある場合は、jQuery を使用する必要があります。このようなアニメーションは jQuery の目的であり、jQuery のこの機能が使いやすく、うまく機能することを確認するために、多くの人々が多大な努力を払ってきました。この機能を自分で複製するのは、時間の無駄です。

これは CSS3 トランジションで簡単に行うことができますが、これらは IE では (まだ) サポートされていません。IE を気にしない場合、これも優れたソリューションです。

于 2012-04-22T06:41:22.733 に答える