Кнопка на CSS

Кнопка на JavaScript

(Пример кнопки № 5)

WEB - страница

Код в документе HTML

5. Фиксированная кнопка прокрутки "Наверх"

на javascript

Вид и работу "Кнопки" смотри
в правом нижнем углу
на этой странице

Эта Кнопка "4" отличается
от Кнопки "3" тем, что появляется на экране в том случае, когда текст страницы "больше" одного экрана.

Если страница (текст) помещается на одном экране, то кнопка скрыта (не видна).

При нажатие на Кнопку "4"
(см. Кнопку в нижнем углу) текст прокручивается наверх плавно, а не резко,
как в Примере 3.

<head>
<style>
.scrollTop{      
display:block; 
position:fixed; bottom:58px; right:26px;  
z-index:2000;  
}  
.scrollTop:hover{background-color:#ff2f2f;border:1px solid #ff8000;}  
</style>
</head>

<a id="gotop" class="scrollTop" href="#" onclick="top.goTop(); return false;">
  <div style="color:#e8e3d4;font-weight:bold;background-color:#7e5a25;padding:10px;">▲ Наверх</div>
</a>

<script type="text/javascript">
(function() {  
  
function $(id){  
    return document.getElementById(id);  
}  
  
function goTop(acceleration, time) {  
    acceleration = acceleration || 0.1;  
    time = time || 12;  
  
    var dx = 0;  
    var dy = 0;  
    var bx = 0;  
    var by = 0;  
    var wx = 0;  
    var wy = 0;  
  
    if (document.documentElement) {  
        dx = document.documentElement.scrollLeft || 0;  
        dy = document.documentElement.scrollTop || 0;  
    }  
    if (document.body) {  
        bx = document.body.scrollLeft || 0;  
        by = document.body.scrollTop || 0;  
    }  
    var wx = window.scrollX || 0;  
    var wy = window.scrollY || 0;  
  
    var x = Math.max(wx, Math.max(bx, dx));  
    var y = Math.max(wy, Math.max(by, dy));  
  
    var speed = 1 + acceleration;  
    window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));  
    if(x > 0 || y > 0) {  
        var invokeFunction = "top.goTop(" + acceleration + ", " + time + ")"  
        window.setTimeout(invokeFunction, time);  
    }  
    return false;  
}  
  
//*  
function scrollTop(){  
    var el = $('gotop');  
    var stop = (document.body.scrollTop || document.documentElement.scrollTop);  
    if(stop>400){  
        if(el.style.display!='block'){  
            el.style.display='block';  
            smoothopaque(el, 0, 100, 1);  
        }  
    }  
    else  
        el.style.display='none';  
  
    return false;  
}  
  
// Плавная смена прозрачности  
function smoothopaque(el, startop, endop, inc){  
    op = startop;  
    // Устанавливаем прозрачность  
    setopacity(el, op);  
    // Начинаем изменение прозрачности  
    setTimeout(slowopacity, 1);  
    function slowopacity(){  
        if(startop < endop){  
            op = op + inc;  
            if(op < endop){  
                setTimeout(slowopacity, 1);  
            }  
        }else{  
            op = op - inc;  
            if(op > endop){  
                setTimeout(slowopacity, 1);  
            }  
        }  
        setopacity(el, op);  
    };  
};  
// установка opacity  
function setopacity(el, opacity){  
    el.style.opacity = (opacity/100);  
    el.style.filter = 'alpha(opacity=' + opacity + ')';  
};  
  
if (window.addEventListener){  
    window.addEventListener("scroll", scrollTop, false);  
    window.addEventListener("load", scrollTop, false);  
}  
else if (window.attachEvent){  
    window.attachEvent("onscroll", scrollTop);  
    window.attachEvent("onload", scrollTop);  
}     
  
window['top'] = {};  
window['top']['goTop'] = goTop;           
  
})();  
 </script>

вернуться на основную статью >>>