막상 뭐라고 이름짓기 힘들군요 ㅋㅋㅋ
이곳에 적용된..왼쪽에 따라다니는 화살표 입니다.
클릭하면 최상위로 또는 최하위로 이동합니다.
아래남은 공간이 많으면 아래로.. 위에 남은공간이 많으면 위로... 알아서 이동하는 똑똑한 넘입니다.
익스에선..휙휙~ 이동하고 파폭에선 스르륵 이동합니다. (익스에선 사이트 환경에 따라 간혹 버벅이길래...)
본인의 사이트가 가벼워서...익스에서도 스르륵~ 이동되길 원하신다면...
if (!document.selection)
{
...
}
위과 같은 if 구문을 벗겨내시면 됩니다.
설치는 간단히 아래 이미지태그와 스크립트를 원하는 곳에 넣어주시면 됩니다. (이미지는
position 이 absolute 이기때문에 태그상에서(html 코드에서) 넣어주신 위치에 바로 나옵니다만..
살짝 위치를 조정하고 싶으시면.. margin-left:-7px; 값을 조절하시면 가로 위치 이동 가능합니다.
세로 위치는 현재는 화면 중앙입니다만~ 상단이나..하단이나..이런대로 옮기시려면 최하단의
floater.style.top = (document.body.scrollTop + ((h-13)/2))+"px" ; 에서
-13 부분을 조절하시면 됩니다.
--이하 소스--
<img id="floater" title="위로/아래로" alt="up,down" onclick="autoUpDown();" src="updown_orange.gif" style="cursor:pointer; margin-left:-7px; position:absolute;" />
<script>
function back_top()
{
var x = document.body.scrollLeft;
var y = document.body.scrollTop;
var step = 2;
if (!document.selection)
{
while ((x != 0) || (y != 0)) {
scroll (x, y);
step += (step * step / 300);
x -= step;
y -= step;
if (x < 0) x = 0;
if (y < 0) y = 0;
}
}
scroll (0, 0);
}
function back_bottom()
{
var endx = document.body.scrollWidth;
var endy = document.body.scrollHeight;
var x = document.body.scrollLeft;
var y = document.body.scrollTop;
var step = 2;
if (!document.selection)
{
while ((x != endx) || (y != endy)) {
scroll (0, y);
step += (step * step / 300);
x += step;
y += step;
if (x > endx) x = endx;
if (y > endy) y = endy;
}
}
scroll (0, endy);
}
function autoUpDown() {
var h = window.innerHeight || self.innerHeight || document.body.clientHeight;
if (document.body.scrollTop >= document.body.scrollHeight - (document.body.scrollTop + h))
{
back_top();
} else {
back_bottom();
}
}
var floater = document.getElementById("floater");
window.onscroll = function () {
var h = window.innerHeight || self.innerHeight || document.body.clientHeight;
var newTop = (document.body.scrollTop + ((h-13)/2));
if (newTop > floater.parentNode.offsetTop)
{
floater.style.top = newTop+"px" ;
} else {
floater.style.top = floater.parentNode.offsetTop+"px" ;
}
}
window.onresize = function () {
var h = window.innerHeight || self.innerHeight || document.body.clientHeight;
var newTop = (document.body.scrollTop + ((h-13)/2));
if (newTop > floater.parentNode.offsetTop)
{
막상 뭐라고 이름짓기 힘들군요 ㅋㅋㅋ
이곳에 적용된..왼쪽에 따라다니는 화살표 입니다.
클릭하면 최상위로 또는 최하위로 이동합니다.
아래남은 공간이 많으면 아래로.. 위에 남은공간이 많으면 위로... 알아서 이동하는 똑똑한 넘입니다.
익스에선..휙휙~ 이동하고 파폭에선 스르륵 이동합니다. (익스에선 사이트 환경에 따라 간혹 버벅이길래...)
본인의 사이트가 가벼워서...익스에서도 스르륵~ 이동되길 원하신다면...
if (!document.selection)
{
...
}
위과 같은 if 구문을 벗겨내시면 됩니다.
설치는 간단히 아래 이미지태그와 스크립트를 원하는 곳에 넣어주시면 됩니다. (이미지는
)
position 이 absolute 이기때문에 태그상에서(html 코드에서) 넣어주신 위치에 바로 나옵니다만..
살짝 위치를 조정하고 싶으시면.. margin-left:-7px; 값을 조절하시면 가로 위치 이동 가능합니다.
세로 위치는 현재는 화면 중앙입니다만~ 상단이나..하단이나..이런대로 옮기시려면 최하단의
floater.style.top = (document.body.scrollTop + ((h-13)/2))+"px" ; 에서
-13 부분을 조절하시면 됩니다.
--이하 소스--
<img id="floater" title="위로/아래로" alt="up,down" onclick="autoUpDown();" src="updown_orange.gif" style="cursor:pointer; margin-left:-7px; position:absolute;" />
<script>
function back_top()
{
var x = document.body.scrollLeft;
var y = document.body.scrollTop;
var step = 2;
if (!document.selection)
{
while ((x != 0) || (y != 0)) {
scroll (x, y);
step += (step * step / 300);
x -= step;
y -= step;
if (x < 0) x = 0;
if (y < 0) y = 0;
}
}
scroll (0, 0);
}
function back_bottom()
{
var endx = document.body.scrollWidth;
var endy = document.body.scrollHeight;
var x = document.body.scrollLeft;
var y = document.body.scrollTop;
var step = 2;
if (!document.selection)
{
while ((x != endx) || (y != endy)) {
scroll (0, y);
step += (step * step / 300);
x += step;
y += step;
if (x > endx) x = endx;
if (y > endy) y = endy;
}
}
scroll (0, endy);
}
function autoUpDown() {
var h = window.innerHeight || self.innerHeight || document.body.clientHeight;
if (document.body.scrollTop >= document.body.scrollHeight - (document.body.scrollTop + h))
{
back_top();
} else {
back_bottom();
}
}
var floater = document.getElementById("floater");
window.onscroll = function () {
var h = window.innerHeight || self.innerHeight || document.body.clientHeight;
var newTop = (document.body.scrollTop + ((h-13)/2));
if (newTop > floater.parentNode.offsetTop)
{
floater.style.top = newTop+"px" ;
} else {
floater.style.top = floater.parentNode.offsetTop+"px" ;
}
}
window.onresize = function () {
var h = window.innerHeight || self.innerHeight || document.body.clientHeight;
var newTop = (document.body.scrollTop + ((h-13)/2));
if (newTop > floater.parentNode.offsetTop)
{
floater.style.top = newTop+"px" ;
} else {
floater.style.top = floater.parentNode.offsetTop+"px" ;
}
}
var h = window.innerHeight || self.innerHeight || document.body.clientHeight;
floater.style.top = (document.body.scrollTop + ((h-13)/2))+"px" ;
</script>
