人気ブログランキング | 話題のタグを見る

名古屋在住Webデザイナーの興味の先や仕事で使える小技まで☆
by atsunao
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
【javascript】アンカーでページ全体をスクロールさせる
***対応状況***
macIE_5.x--------ok
macNS_4.7-----------NG
winIE_6----------ok
winFirefox--------ok



------------------------------------------
html の中身
------------------------------------------
<html>
<head>
<title>アンカーでスクロール</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script type="text/javascript" src="scroll.js"></script>
</head>

<body bgcolor="#FFFFFF">
<div id="TOP"></div><!-- ←これがアンカー替わり -->
<p><a href="JavaScript:ssScrollToObj('id001');">001へスクロールする</a><br>
<a href="JavaScript:ssScrollToObj('id002');">002へスクロールする</a><br>
<a href="JavaScript:ssScrollToObj('id003');">003へスクロールする</a><br>
<a href="JavaScript:ssScrollToObj('id004');">004へスクロールする</a><br>
<a href="JavaScript:ssScrollToObj('id005');">005へスクロールする</a><br>
</p>
<div id="id001"></div><!-- ←これがアンカー替わり -->
<table width="485" border="0" cellspacing="20" cellpadding="20" style="margin-left:10px;" bgcolor="#CCCCFF" height="150">
<tr>
<td height="5" colspan="2" valign="bottom">001です</td>
</tr>
</table>
<a href="JavaScript:ssScrollToObj('TOP');">先頭へ戻る▲</a><br>
<br>
<br>
<div id="id002"></div><!-- ←これがアンカー替わり -->
<table width="485" border="0" cellspacing="20" cellpadding="20" style="margin-left:10px;" bgcolor="#FFCCCC" height="150">
<tr>
<td height="5" colspan="2" valign="bottom">002です</td>
</tr>
</table>
<a href="JavaScript:ssScrollToObj('TOP');">先頭へ戻る▲</a><br>
<br>
<br>
<div id="id003"></div><!-- ←これがアンカー替わり -->
<table width="485" border="0" cellspacing="20" cellpadding="20" style="margin-left:10px;" bgcolor="#CCFFCC" height="150">
<tr>
<td height="5" colspan="2" valign="bottom">003です</td>
</tr>
</table>
<a href="JavaScript:ssScrollToObj('TOP');">先頭へ戻る▲</a><br>
<br>
<br>
<div id="id004"></div><!-- ←これがアンカー替わり -->
<table width="486" border="0" cellspacing="20" cellpadding="20" style="margin-left:10px;" bgcolor="#FFCC99" height="150">
<tr>
<td height="5" colspan="2" valign="bottom">004です</td>
</tr>
</table>
<a href="JavaScript:ssScrollToObj('TOP');">先頭へ戻る▲</a><br>
<br>
<br>
<div id="id005"></div><!-- ←これがアンカー替わり -->
<table width="485" border="0" cellspacing="20" cellpadding="20" style="margin-left:10px;" bgcolor="#CCFFFF" height="150">
<tr>
<td height="5" colspan="2" valign="bottom">005です</td>
</tr>
</table>
<a href="JavaScript:ssScrollToObj('TOP');">先頭へ戻る▲</a><br>
</body>
</html>






------------------------------------------
外部js(scroll.js) の中身
------------------------------------------
/*
-----------------------------------------------------------
Brouser Check
-----------------------------------------------------------
*/
var _Ver = navigator.appVersion.charAt(0);
var _Ie = ( navigator.userAgent.indexOf("MSIE") != -1 );
var _Mac = ( navigator.appVersion.indexOf("Mac") != -1 );

//=========================================================

function ssListOv(id) {
ssImgOv("thb"+id,"btn"+id);
}

function ssListOf(id) {
ssImgOf("thb"+id,"btn"+id);
}

function ssListPre(id) {
ssPreloadOv("thb"+id,"btn"+id);
}

//=========================================================

function ssGetObj(id,d) {
if( !d ) var d = document;
if( d.getElementById ) return d.getElementById( id );
if( d.all ) d.all( id );
return d[id];
}

//=========================================================

function ssScrollToTop() {
ssScrollTo(0);
}

function ssScrollToObj( id ) {
ssScrollTo( _ss_GetObjPosY(id) );
}

function ssScrollTo( y ) {
if( _ss_scrollTimer ) clearInterval( _ss_scrollTimer );
_ss_scrollToY = y;
_ss_scrollLastY = _ss_GetScrollPosY();
_ss_scrollTimer = setInterval( '_ss_ScrollDo();', 15 );
}


//=========================================================
var _ss_scrollToY;
var _ss_scrollLastY;
var _ss_scrollTimer;

function _ss_ScrollDo() {
var d = _ss_scrollLastY - _ss_scrollToY;
var done = false;
if( Math.abs(d)<1 ) {
done = true;
_ss_scrollLastY = _ss_scrollToY;
} else if( _ss_GetScrollPosY() != Math.floor(_ss_scrollLastY) ) done = true;
else _ss_scrollLastY -= d / 6;
self.scrollTo( 0, Math.floor(_ss_scrollLastY) );
if( done ) {
clearInterval( _ss_scrollTimer );
_ss_scrollTimer = null;
}
}

function _ss_GetScrollPosY() {
if( _Ie ) return document.body.scrollTop;
return self.pageYOffset;
}

function _ss_GetObjPosY( id ) {
var o = ssGetObj(id);
if( document.getElementById ) return o.offsetTop;
if( _Ie ) return o.style.pixelTop;
return o.top;
}
by atsunao | 2006-11-21 14:31 | Webデザインの小技
<< グルビのトークショー&パーティ... "平方メートル&qu... >>