トップスクロールのようにブログ内全てをスムーズにスクロールしてみたいな…そんな想いからスムーズスクロールと検索してみたところしっかり方法があるらしいのでその方法を折り返し勉強も兼ねて更新しようと思います(*‘ω‘ *)
まず手順としてはhead内にjavascriptを入れるだけで、HTML全体に<a href="#"></a>と<div id ="#"></div>と記述してあげるだけで簡単に設置できる仕組みになってます。
<head>～</head>内に入れる
<!--スムーズススクロール-->
<script type="text/javascript" src="http://blog-imgs-69.fc2.com/b/a/r/barasa88888/20140611194712c3f.js"></script>
<script type="text/javascript">
$(function(){
$("a[href^=#]").click(function() {
var myHref= $(this).attr("href");
var myPos = $(myHref).offset().top;
$("html,body").animate({scrollTop : myPos}, 1200);
return false;
});
});
</script>
<!--/スムーズススクロール-->
後はa要素でクリックさせてdiv要素でスクロールさせる場所を設定してあげるだけです。
<a href="#down">a要素でクリックさせ下までスクロールさせます</a>
クリックして下までスクロールしてみる
<div id="down"></div>
div要素でスクロールされる場所を指定してあげます。
方法はたったこれだけです。
自分で作成したサンプルページもあるので暇だったら見てあげて下さい。
可愛い褐色娘がいます(*‘ω‘ *)
Read More
まず手順としてはhead内にjavascriptを入れるだけで、HTML全体に<a href="#"></a>と<div id ="#"></div>と記述してあげるだけで簡単に設置できる仕組みになってます。
<head>～</head>内に入れる
<!--スムーズススクロール-->
<script type="text/javascript" src="http://blog-imgs-69.fc2.com/b/a/r/barasa88888/20140611194712c3f.js"></script>
<script type="text/javascript">
$(function(){
$("a[href^=#]").click(function() {
var myHref= $(this).attr("href");
var myPos = $(myHref).offset().top;
$("html,body").animate({scrollTop : myPos}, 1200);
return false;
});
});
</script>
<!--/スムーズススクロール-->
後はa要素でクリックさせてdiv要素でスクロールさせる場所を設定してあげるだけです。
<a href="#down">a要素でクリックさせ下までスクロールさせます</a>
クリックして下までスクロールしてみる
div要素でスクロールされる場所を指定してあげます。
方法はたったこれだけです。
自分で作成したサンプルページもあるので暇だったら見てあげて下さい。
可愛い褐色娘がいます(*‘ω‘ *)
