Как сделать прокрутку страницы?

Как сделать прокрутку страницы вверх? Такую же как у тебя на сайте. Установить-то и позиционировать кнопку для скроллинга вверх страницы не сложно, непонятно как работает у тебя скрипт, стрелка появляется когда страница прокручивается вниз

Как сделать прокрутку страницы?

» » Сообщение:

Как сделать прокрутку страницы вверх? Такую же как у тебя на сайте. Установить-то и позиционировать кнопку для скроллинга вверх страницы не сложно, непонятно как работает у тебя скрипт, стрелка появляется когда страница прокручивается вниз. Посмотрел как сделано у тебя, но у меня почему-то не стало работать, что-то я упускаю.

страницы, вверх, посмотрел, вниз, сделано, упускаю, скрипт, работать, непонятно, сайте, такую, установить, позиционировать, сделать, работает

Re: Как сделать прокрутку страницы?

likbezz » » Сообщение:

Komoff,

Как сделать прокрутку страницы вверх? Такую же как у тебя на сайте. Установить-то и позиционировать кнопку для скроллинга вверх страницы не сложно, непонятно как работает у тебя скрипт, стрелка появляется когда страница прокручивается вниз.

Скрипт:

Код: Выделить всё Развернуть
<script type="text/javascript">
function toTop(){var toTop=$('#upLink');($(window).scrollTop()>'0')?toTop.fadeIn():toTop.fadeOut();};
$(window).scroll(function(){toTop();});toTop();
</script>

Ссылка:

Код: Выделить всё Развернуть
<a title="Вверх страницы" id="upLink" href="#up" onclick="scroll(0,0);return false;">&nbsp;</a>

Стили:

Код: Выделить всё Развернуть
#upLink{display:block;background:url('../ico/up.gif') no-repeat 0 0;height:29px;width:26px;position:fixed;bottom:30px;right:30px;text-decoration:none;cursor:pointer;z-index:999;}

Re: Как сделать прокрутку страницы?

Komoff » » Сообщение:

Чето не выходит. sad Вставляю скрипт до ссылки, стрелка всегда отображается, вставляю под неё стрелка отображается, а если прокрутить страницу, то исчезает или стрелка появляется в начале и пропадает сама. Не могу понять, что я не правильно делаю. Скрипт, CSS и ссылка, где и в каких последовательностях должны быть? DOCTYPE пробовал менять, поставил такой же как у тебя, без толку.


Re: Как сделать прокрутку страницы?

likbezz » » Сообщение:

Komoff,

Вставляю скрипт до ссылки, стрелка всегда отображается

По моему, как раз с тобой, обсуждали, что нельзя работать с объектом, которого не существует ....
Следовательно - сначала стрелка, потом скрипт.

Скрипт, CSS и ссылка, где и в каких последовательностях должны быть?

CSS - в стили.
Стрелка - в код.
Скрипт - под стрелку, или на онлоад - тогда в любое место.

Типа:
Пример1
- В примере активация по DOM ready

Код: Выделить всё Развернуть
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>toTop</title>
<link id="myStyleExample" rel="stylesheet" type="text/css" href="/_source/_st/ext/example.css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/[anchor=http://likbezz.ru/viewtopic.php?t=1569|Как вывести форму добавления комментария в AJAX-окне?]ajax[/anchor]/libs/jquery/1.6.1/jquery.min.js"></script>
<style type="text/css">
#upLink{display:block;background:url('http://likbezz.ru/_theme1/_st/ico/up.gif') no-repeat 0 0;height:29px;width:26px;position:fixed;bottom:30px;right:30px;text-decoration:none;cursor:pointer;z-index:999;}
</style>
<script type="text/javascript">
function toTop(){var toTop=$('#upLink');($(window).scrollTop()>'200')?toTop.fadeIn():toTop.fadeOut();};
$(window).scroll(function(){toTop();});$(function(){toTop();});
</script>
</head>

<body>
<br style="display:block;margin-top:360em;" />
<a title="Вверх страницы" id="upLink" href="#up" onclick="scroll(0,0);return false;">&nbsp;</a>
</body>
</html>

...

Но можно и просто поместить скрипт ниже по коду стрелки:
Пример 2 ....

Код: Выделить всё Развернуть
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>toTop2</title>
<link id="myStyleExample" rel="stylesheet" type="text/css" href="/_source/_st/ext/example.css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style type="text/css">
#upLink{display:block;background:url('http://likbezz.ru/_theme1/_st/ico/up.gif') no-repeat 0 0;height:29px;width:26px;position:fixed;bottom:30px;right:30px;text-decoration:none;cursor:pointer;z-index:999;}
</style>
</head>

<body>
<br style="display:block;margin-top:360em;" />
<a title="Вверх страницы" id="upLink" href="#up" onclick="scroll(0,0);return false;">&nbsp;</a>
<script type="text/javascript">
function toTop(){var toTop=$('#upLink');($(window).scrollTop()>'200')?toTop.fadeIn():toTop.fadeOut();};
$(window).scroll(function(){toTop();});toTop();
</script>
</body>
</html>

....

В стилях, а именно:

Код: Выделить всё Развернуть
#upLink{display:block;}

- сделано на случай если у пользователя отключён JS.
Скриптом скрываем, и скриптом показываем.
Если отключён - просто показываем.
Что бы не мигала (показалась на долю секунды и исчезла) при загрузке - можно прописать display:none; - но тогда при отлючённом JS - стрелки вообще не будет.






Похожие темыКомментарии ПросмотрыПоследнее сообщение
01235Как сделать загрузочную флешку с Wi...
Сообщение от: Admin
2890Re: Дополнительные шрифты к BB-кода...
Сообщение от: SKh
049Как сделать свою шапку для нужных р...
Сообщение от: Admin
305257Re: Как сделать рейтинг материалов ...
Сообщение от: Admin
834362Re: Как сделать.. Не сортированные ...
Сообщение от: Admin