自動化厨のプログラミングメモブログ │ CODE:LIFE

Python/ExcelVBA/JavaScript/Raspberry Piなどで色んなことを自動化

ページ内リンクをすべて滑らかにスクロールさせるjQuery

f:id:maru0014:20151019221044p:plainページ内でのリンクを貼る場合

 

<a href="#pagetop">ページトップへ戻る</a>

 

などと書きますよね。
Q&Aのページなどの場合大変便利。

でもこれ、普通にリンクを貼るだけだと瞬間的に画面が切り替わってスクロールされている感が少ない!

ちょっとこだわったサイトだとすーーっとスクロールして表示されます。

上に行ったのか下に行ったのか分かりやすく、何より今風でいいですよね。

 

これを簡単に実装できるようにコピペできるソースを公開!

 

 

 

上記を

<head> ~ </head> 内 もしくは</body>直前に挿入。

これだけで滑らかにスクロールされます。

 

※「リンクが # で始まる場合」という指定なので別ページ間でのスムーズスクロールは不可です。

 

【jQuery】ホームページ読み込み時にローディング画面を表示させる

now-loading

仕事でWEB制作している時に使ったもののメモ書きです。 年々回線速度はアップしているが、画像が多いページの場合は完全にページを表示するまでに時間がかかってしまうもの。

 

読み込んでいる間に右画像のようなローディング画面を表示する方法のうちなるべくお手軽なものを紹介。

 

続きを読む

<base target="_self">が効かない場合はJavaScriptで対応

js_black_icon

インラインフレームを使用する場合はフレーム内のリンクにtargetをつけなければ、フレーム内部でページが開かれてしまう。

これを回避するために使われるのが

上記を<head>内に記述すればリンクのtargetが全て親ウィンドウで開かれるようになる。

しかし、この<base>タグを記述しているにも関わらずtarget="_self"やtarget="_top"、target="_blank"などが効かない現象に陥ることがある。

その原因は・・・

 

続きを読む