menu
menu

キーワード検索

 

前月(8月)の人気記事トップ10

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5 Tips】スマホサイトの作成・基本編
  4. ( 4-) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 5-) 【実践でjQuery入門】jQueryで日時を表示
  6. ( 7↑) 【制作Tips】スマホサイト向け横にスクロールするナビゲーション
  7. ( 6↓) 【JavaScript Tips】表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( -↑) 【Mac Tips】MacにInkscapeをインストール
  9. ( 9-) 【MySQL】Windows 10にMySQLをインストール
  10. ( 8↓) 【HTML5】HTML5・ページ作成の基本

【スクロール】JavaScriptでスムーススクロール

  • Labs

JavaScript

こんにちは(・∀・)

JavaScriptを使用したサンプルをご紹介します。今回はスムーススクロールです。

サンプル

スムースにページ内をスクロールさせたいa要素に「class="ss"」を指定します。

HTML

<a href="#hoge" class="ss">Go to hoge</a><--classにssを指定-->

<div id="hoge">hoge</div>
JavaScript

function scroll() {
var ssobj = document.getElementsByTagName('a');
for(var i=0; i < ssobj.length; i++) {
if(ssobj[i].className == 'ss') {
ssobj[i].onclick = function() {
smsc(this);
return false;
}
}
}
}
function smoothScroll() {
if (Math.abs(current_y - target_y) < Math.abs(speed)) {
window.scrollTo((document.body.scrollTop || document.documentElement.scrollTop),target_y);
clearInterval(sstimer);
return false;
} else {
window.scrollBy(0,speed);
current_y += speed;
}
}
function smsc(ssval) {
speed = 50;
smooth = 25;
current_y = document.body.scrollTop || document.documentElement.scrollTop;
sspath = '' + ssval;
sstarget = sspath.split('#');
sselement = document.getElementById(sstarget[1]);
target_y = 0;
for (i = sselement;i.offsetParent;i = i.offsetParent) {
target_y += i.offsetTop;
}
if(current_y > target_y) {
speed = -(speed);
}
sstimer = setInterval('smoothScroll()',smooth);
return false;
}
if(window.addEventListener) {
window.addEventListener('load',scroll,false);
} else if(window.attachEvent) {
window.attachEvent('onload',scroll);
}
Result

サンプルデモはこちら


関連リンク

【スクロール】jQueryでページトップボタン
【スクロール】ページトップボタンとページ内スムーススクロール

  • カテゴリー:Labs