【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript
- 2012年02月15日
- Javascript, プログラミング
- jQuery
最近ではページ内でリンクを飛ばす際には当然の仕様となっているスムーススクロールを簡単なタグで実現します。
どうだい?スムースだろ?
個人的にこの動きが大好きです。
1時間くらいならずっとスクロールを見ていられます。
鬱の時なら半日はいけます!
HTML
<a href="#bottom">下へスムース!</a>
なにも工夫しなくて良いです。
ただ#をつけてアンカーポイントへリンクを貼るだけです。
Javascript
jQuery依存のスクリプトなので、head内でjQueryを呼び出しましょう。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
その後に以下のスクリプトを書きます。
<script type="text/javascript"> $(function(){ $('a[href^=#]').click(function(){ var speed = 500; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); }); </script>
これで、ページ内リンクであれば勝手にスムーススクロール処理をしてくれます。
var speed = 500; の部分がスクロール完了までの時間です。
数字が小さいほどシャッ!と動きます。
[…] 下記サイト様のサンプル等を参考にさせて頂きました。 ページ内リンクをするするーっとスムースにスクロールするJavascript jQueryでマウスホイールすると余韻が残るイージングスクロー […]
[…] ページ内をスムースにスクロール Headline↑ ページ内をスムースにスクロール […]
[…] 【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript […]
Your’s is a point of view where real inencligetle shines through.
[…] 【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript […]
今Web勉強中で、課題でサイト作成中の者です。
スムーズスクロールをやりたくて、本買ったり、いろんなサイトで調べてやってたんですがどうしてもできなくて、半月くらい煩悶してました。
が、こちらのでやっと動きました!!!!!
超うれしかったーーーーー!!!!
ありがとうございましたーーーーー!!!!
コンニチハ。
こちらで拝見して実装させて頂きました!
ローカルでは見事に動くのですが
オンライン上にあげると動かなくなってしまいます…。
これはどういった原因が考えられますでしょうか?
うーん。。なんでしょうか。。
ひょっとして大川さんは、当スクリプトをWordPressに組み込んで使っているんでしょうか。
WordPressでjQueryを使う場合は、少しコードを変更しないと動かないようです。
http://kachibito.net/web-design/wordpress-with-jquery.html
そうでなければ・・今のところ思い当たる節はないです。
30分くらいぼーっと見てた。
Good Job!
[…] ページ内リンクをするするーっとスムースにスクロールするJavascript […]
ソースを頂いて実装させて戴きました。
ありがとうございます^^
デモの最下部が
「スムース」ではなく「スームス」になっておりましたよ(小声)
スームスわざとです(小声)
はじめまして!
ありがたく実装をさせて頂いたのですが、
Firefoxでは未対応でしょうか!?
よろしくお願いします。
ご指摘ありがとうございます!
Firefoxでも動作するよう変更しました。
以前、jQueryのバージョンが新しい場合に動かない不具合があって、それを修正したら、今度はFirefoxで動作しなくなっていたようです。
[…] 【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript | KLUTCHE […]
[…] http://klutche.org/archives/536/ […]
[…] 【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript | KLUTCHE […]
[…] ちなみにこのサイトを参考にしました。 KLUTCHE […]
はじめまして!
スクロールをさせたくて色々調べていてこのサイトにたどり着きました。
動きがきもちよくて、ずっと眺めてしまいます!
いま商用サイトの製作をしているのですが、このページのスムーススクロールのコードを使うことは可能でしょうか?
管理人さまの著作権等が発生するんでしょうか?
是非使ってください。
商用でも二次配布でもなんでもOKですが、不具合への責任は負いかねますので、ご了承ください。
ありがとうございます!
jQueryって、ほんとにいろんなことができて、奥が深いですね…。
これから、勉強していきます!
はじめまして!
きれいに動くスクロールを探してたどり着きました。
ほんと、気持ちいい動きですね!ウットリです!!
新米webデザイナーさんと同じように商用サイトに使用させていただいてもよろしいでしょうか?
[…] klutche.org/archives/536/ […]
はじめまして。
只今、jQueryを勉強中です。町会のホームページを作成中でこのページを参考にさせて頂きました。
ありがとうございました。
使わせて頂いてますありがとうございます。
このコードだと簡単に上方向、下方向にスムーススクロール出来るのが素晴らしいです。
ページトップにはスムーススクロールするけどid要素にスムーススクロールするというのは以前探した時に見つからなかったので。
このコードですと、他のjavascriptの際にaタグでhref=”#”とし、クリックでjavascriptを動かすとしている場合に不具合というか、ページ先頭にスクロールしてしまう誤作動がおきます。
$(“html, body”).animate({scrollTop:position}, speed, “swing”);
return false;
の2行を
if(position)で
if(position){
$(“html, body”).animate({scrollTop:position}, speed, “swing”);
return false;
}
のように囲ってあげればその誤作動は無理やりですが解消されます。
おかげで、簡単にスクロール出来ました。
ありがとうございました!
どうだい?スムースだろう?って、最高です。
何回もスクロールしてしまいました。w
んー
やはりこれもAndroid2.3では不具合がでますねぇ
下から上に戻ったと見せかけて、速攻でフッターに戻されるんですよね
どうしたものか・・・
本当だ・・・
上から下は行くのに
下から上だと戻されるんですね。
解決策を探ってみます。
はじめまして!
スクロールをさせたくて色々調べていてこのサイトにたどり着きました。
特定のaタグのみ、スクロールしたいのですがどうしたらいいのか分かりません。もし方法があるのならお教え願いませんか?
Javascript の3行目
$('a[href^=#]').click(function(){
の部分を
$('a[href^=#].scroll').click(function(){
みたいに .scroll を足してやると
class=”scroll” が付いた a のみスクロールさせることができますよ。
mail返信ありがとうございます。ご教授いただいた方法で試してみたところ、特定のタグのみスムースに動く様になりました。ありがとうございます。
こういうシンプルな教え方のおかげで、やっとスムーズな移動方法が理解できました。
[…] 【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript […]
わかりやすくシンプルそうだったので、利用させていただきたいのですが。。初めスルーっといったのにしばらくしたら動きません。いろいろいじってしまい、うまくいってたときのソースはわかりませんが、現状はこんな感じです。
↑これをhead内に読み込み、↑
$(function(){
$(‘a[href^=#].scroll’).click(function(){
var speed = 500;
var href= $(this).attr(“href”);
var target = $(href == “#” || href == “” ? ‘html’ : href);
var position = target.offset().top;
$(“html, body”).animate({scrollTop:position}, speed, “swing”);
return false;
});
});
↑これも読み込みました↑
HTML側は、リンク元のタグに
class”scroll”と、#gotoTopとつけ、
リンクの飛び先にid=”gotoTop”です。
※コメントにありました特定のaタグのみスクロール、でやっています。
何かお分かりになりますでしょうか。。。普通のページ内リンクは飛んでます。
↑これをhead内に読み込み、↑
冒頭はこれでした。抜けたようですみません
わかんないよ~;
[…] http://klutche.org/archives/536/ […]
サンプルページ、「上へスームス!」となっていますが、
「上へスムース!」でしょうか?
[…] 【【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript | KLUTCHE】 […]
[…] http://klutche.org/archives/536/ […]
[…] http://klutche.org/archives/536/ […]
Finding this post has anwesred my prayers
[…] 【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript | KLUTCHE […]
私は、あなたが神にしか見えません。
ありがとうございました。
スムースも、ユーモラスで何回もクリックしました。
jQuery 1.12.3にて
セレクタを
$(‘a[href^=#]’)
と記述するとSyntax errorが出て動かないため、
$(‘a[href^=”#”]’)
と値を引用符で囲う必要があります。
WordPress 4.5以上を利用している場合は同梱のjQueryが1.12.3になっているため、このエラー対策が必要になります。
素晴らしい!