スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
公開: --年--月--日, カテゴリ: スポンサー広告

ページ内リンクの移動をなめらかに dfsmooth scroll

最近はほとんど使わなくなりましたが以前は目次を作ってアンカータグ<a>を使ってページ内移動をさせていました(その他には注釈などで使っています)。 今回dfSmooth Scrollというスクリプトを導入してみました。これを導入するとページ内移動がとてもなめらかになります。 スクリプトはdfSmooth Scroll | Dezinerfolioからダウンロードできます。

追記: 2011-01-18
現在、このWeblogではこのスクリプトは利用していません。そこで別途作成した附属書(P101) - dfsmooth scroll デモページ (別冊 藍色通信)ではこのスクリプトの動作を試すことができますので興味ある方はどうぞ。


更新: 2011-01-18

導入メモ

方法1. スクリプトを外部ファイルとして読込ませる

  1. ダウンロードしたスクリプトファイルをアップロードします。
    • FC2ブログのファイルアップロードを使うとファイル名のエラーではじかれるのでsmoothpack.jsなどにリネームしておきましょう。
  2. 次にテンプレートの設定でHTMLの編集をします。<head>~</head>間に下記内容を追記します。
    
    <head>
    
    <script type="text/javascript" src="スクリプトファイルへのパス"></script>
    
    </head>
  3. これで導入は終わりです。ページ内移動がぬるぬる動くのを確認しましょう。

方法2. テンプレートのHTMLに直接スクリプトを記述する

  1. <head>~</head>間に下記内容を追記します。
    
    <head>
    
    <script type="text/javascript">
    <!--
    smooth.pack.jsファイル内の記述をコピーペースト
    //-->
    </script>
    
    </head>
  2. これで導入は終わりです。ページ内移動がぬるぬる動くのを確認しましょう。どちらの方法でやるかはお好みで。ちなみに私は方法1の外部ファイルから読込ませていました。
    公開: 2010年08月08日, カテゴリ: ぶろぐいじり