В предыдущей статье я обещал рассказать о втором варианте решения задачи прокрутки страницы вверх.
1. Использование JavaScript
2. Стрелка видна не постоянно, а появляется только при прокрутке страницы вниз.
3. При наведении на стрелку курсора она меняет прозрачность.
4. Перемещение вверх по странице осуществляется плавно.
Привожу решение.
Сначала рисуем картинку:
Как видим, картинка состоит уже из двух частей. Верхняя часть - это изображение стрелки, которое появляется при прокрутке страницы вниз. Нижняя часть картинки - это изображение той же стрелки при наведении на нее курсора.
Каждая часть картинки имеет размер 50x50 пикселей.
Размещаем картинку на сервере.
Для решения задачи мы будем использовать 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;
})();
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;
})();
Файл Gotop.js также размещаем на сервере.
Осталось привести код вызова:
<html>
<head>
<title>Плавное перемещение вверх по странице - JavaScript</title>
<script src="/js/gotop.js"></script>
<style type="text/css">
.scrollTop{
background:url(/img/scrollup2.png) 0 0 no-repeat;
display:block; width:50px; height:50px;
position:fixed;bottom:5px;right:5px;
z-index:2000;
}
.scrollTop:hover{ background-position:0 -58px; }
</style>
</head>
<body>
<a id="gotop" class="scrollTop" href="#" onclick="top.goTop(); return false;"></a>
</body>
</html>
<head>
<title>Плавное перемещение вверх по странице - JavaScript</title>
<script src="/js/gotop.js"></script>
<style type="text/css">
.scrollTop{
background:url(/img/scrollup2.png) 0 0 no-repeat;
display:block; width:50px; height:50px;
position:fixed;bottom:5px;right:5px;
z-index:2000;
}
.scrollTop:hover{ background-position:0 -58px; }
</style>
</head>
<body>
<a id="gotop" class="scrollTop" href="#" onclick="top.goTop(); return false;"></a>
</body>
</html>
Как видите, в принципе и здесь тоже нет ничего сложного. Пользуйтесь на здоровье.
Предыдущая статья: Быстрая прокрутка страницы вверх
Предыдущая статья: Быстрая прокрутка страницы вверх
4 коммент.:
Как интересно... А вот у вас ещё есть одна полезная вещь "Обратная связь". Хочу такую же) Поделитесь, как установить?
Я использую плагин "Кнопка вверх". Очень удобный и легко устанавливаемый плагин. Если сайт не перегружен, то установка плагина, думаю самый лучший вариант.
На WP - может быть, только все сайты похожими друг на друга кажутся.
1. Ваша стрелка видна СРАЗУ. Проверил в ФФ, Опере и Хроме.
2. Идет вверх НЕ плавно.
3. Прозрачность НЕ меняется.
Мой вариант лишен этих недостатков. Скрипты также копируются на СВОЙ сервер (не тянутся с других ресурсов, как у других).
Описал и выложил в статье - http://new-wp.net/51
Отправить комментарий