menu
menu

JavaScriptでスムーススクロール | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook5
  • はてなブックマーク3
  • Google+5
  • Pocket0
  • Twitter0

JavaScriptでスムーススクロール

  • Labs

JavaScript

こんにちは(・∀・)

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

サンプルデモ

 サンプルデモはこちら!


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


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);
}

関連リンク

 jQueryでページトップボタン

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

  • カテゴリー:Labs
  • facebook5
  • はてなブックマーク3
  • Google+5
  • Pocket0
  • Twitter0