jQueryでページ上までスクロールするスクリプト

同じようなものは色々見てきたけどこれはかなり簡単。しかも軽快に動いてくれます。このブログにも早速設置してみました。
画面の下に移動すると右下に画像が現れて、それをクリックするとページ上部までスクロールします。詳細は以下のサイトで。 設置は外部JavaScriptを2つ読み込むだけ。1つはAJAX Libraries APIを使ったjQueryでもう1つはこちら。

  • scrolltopcontrol.js
  • <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="scrolltopcontrol.js">
    /***********************************************
      * Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
      * This notice MUST stay intact for legal use
      * Visit Project Page at http://www.dynamicdrive.com for full source code
      ***********************************************/
    </script>
    scrolltopcontrol.jsのカスタマイズについてはまず11行目。
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    
    以下のような効果があります。
    startline - 画像が現れる場所 (数値が小さいほどすぐ現れる)
    scrollduration - 上に行くまでの時間 (数値が小さいほど早い)
    fadeduration - 画像が現れるときと消えるときのフェード効果
    画像はデフォルトのものはいまいちなので変更しました。また一応絶対パスで指定しました。scrolltopcontrol.jsの12行目を以下のようにします。
    controlHTML: '<img src="http://画像のアドレス/up.png" />', 
    また画像の表示位置は13行目のoffsetxとoffsetyで指定することができます。offsetxは右端からの間隔でoffsetyは下からの間隔になります。以下の場合は右から5px下から5pxの位置に画像が表示されます。
    controlattrs: {offsetx:5, offsety:5},
    
    また、以下のようにリンクで指定することもできます。
    <a href="#top">クリックで上までスクロールします</a>
    
  • クリックで上までスクロールします
  • フィードやTwitterで最新情報をチェック
    follow us in feedly
    この記事に付いているタグの最新記事一覧
    loading...
    コメント









    ※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

    Recent Entry
    Popular Entry
    • このエントリーをはてなブックマークに追加