Прокрутка страницы, исчезающие стрелки.

[Selena]

Добрый вечер! Вот и мне понадобились стрелки прокрутки на верх и в низ. Пользуюсь Вашими советами, только толку -ноль!!! Закинула код, представленный с верху, вставила html код на страницу сайта. Сайт на хостинге.Что вижу? Вижу с права у меня появились надписи "наверх" и "вниз". Я скачала свои картинки стрелок и закинула их на сайт . Но ничего не получается! Подскажите, как должен выглядеть путь картинки? И размер ее в коде уже прописан? ( Я не совсем могу коды читать).И еще! У меня эти надписи находятся под слоями! Там где нет слоя, их видно, а где есть, не видно. Что делать? Помогите , пожалуйста!!!

[Alex15963]

Картинки стрелок, нужно закинуть на сайт в папку Image Размер будет тот, который на картинках. Для того, чтоб стрелки были поверх слоев нужно прописать style>
#back_to_top {
position: fixed;
z-index: 9999;
bottom: 25px;
right: 55px;
display:none;
}
#back_to_top:hover {
cursor:pointer
}
</style> Обратите внимание - z-index: 9999;

[Selena]

Как должен выглядеть путь к картинке? Так <img src="images/2uparrow.png" alt="Наверх" title="Наверх"> где 2uparrow название картинки. она лежит в папке image со всеми другими картинками для сайта. Или так
<img src="image_cache/selenazr/94943c5bc6fa5babffd50320189543fd/2uparrow (1).png

Отправлено спустя 30 минут 22 секунды:
Подскажите, пожалуйста! Очень хочется решить эту проблему!

Отправлено спустя 26 минут 21 секунду:
Когда вставляла код читателя от 21 августа .2013 г. ,с права на сайте были видны хотя бы надписи без картинок! Сделала , как предложили от 13 сентября 2014 г., вообще нет ни чего!!! Помогите! Я же понимаю , что очень просто все! Направьте на путь истинный!!!

Отправлено спустя 49 минут 4 секунды:
Вот что у меня сейчас прописано в до </body>:
<a style='position: fixed; z-index: 9999; bottom: 94px; right: 10px; cursor:pointer; display:none;'
href='#' id='Go_Top'>
<img src="images/up.2uparrow (1).png" alt="Наверх" title="Наверх">
</a>
<script type="text/javascript">
jQuery(function(){
$("#Go_Top").hide().removeAttr("href");
if ($(window).scrollTop()>="50") $("#Go_Top").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()<="50") $("#Go_Top").fadeOut("slow")
else $("#Go_Top").fadeIn("slow")
});

$("#Go_Bottom").hide().removeAttr("href");
if ($(window).scrollTop()<=$(document).height()-"999") $("#Go_Bottom").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()>=$(document).height()-"999") $("#Go_Bottom").fadeOut("slow")
else $("#Go_Bottom").fadeIn("slow")
});
$("#Go_Top").click(function(){
$("html, body").animate({scrollTop:0},"slow")
})
$("#Go_Bottom").click(function(){
$("html, body").animate({scrollTop:$(document).height()},"slow")
})
});

</script>

При этом перестала работать плавная прокрутка до якоря и рисунок стрелки так и не появился!!!! Может мне кто нибудь помочь? Прокрутка до верха работает!

[Alex15963]

А у Вас в этом коде, что Вы дали и не прописана стрелка вниз.
Скопируйте и вставьте. Картинки нужно вставлять в папку images которая находится на сервере в корне, В этом коде картинка вверх - up.png ; вниз - down.png
<a style='position: fixed; z-index: 9999; bottom: 94px; right: 10px; cursor:pointer; display:none;'
href='#' id='Go_Top'>
<img src="images/up.png" alt="Наверх" title="Наверх">
</a>
<a style='position: fixed; z-index: 9999; bottom: 20px; right: 10px; cursor:pointer; display:none;'
href='#' id='Go_Bottom'>
<img src="images/down.png" alt="Вниз" title="Вниз">
</a>
<script type="text/javascript">
jQuery(function(){
$("#Go_Top").hide().removeAttr("href");
if ($(window).scrollTop()>="50") $("#Go_Top").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()<="50") $("#Go_Top").fadeOut("slow")
else $("#Go_Top").fadeIn("slow")
});

$("#Go_Bottom").hide().removeAttr("href");
if ($(window).scrollTop()<=$(document).height()-"999") $("#Go_Bottom").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()>=$(document).height()-"999") $("#Go_Bottom").fadeOut("slow")
else $("#Go_Bottom").fadeIn("slow")
});

$("#Go_Top").click(function(){
$("html, body").animate({scrollTop:0},"slow")
})
$("#Go_Bottom").click(function(){
$("html, body").animate({scrollTop:$(document).height()},"slow")
})
});
</script>
$("#Go_Bottom").hide().removeAttr("href");
if ($(window).scrollTop()<=$(document).height()-"999") $("#Go_Bottom").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()>=$(document).height()-"999") $("#Go_Bottom").fadeOut("slow")
else $("#Go_Bottom").fadeIn("slow")
});

$("#Go_Top").click(function(){
$("html, body").animate({scrollTop:0},"slow")
})
$("#Go_Bottom").click(function(){
$("html, body").animate({scrollTop:$(document).height()},"slow")
})
});
</script>

[Selena]

Спасибо, что ответили! Я знаю, что у меня нет стрелки в низ! Я её убрала. Я там, где Вы красным отметили, должна прописать название картинки? Она называется 2uparrow , так и написать? Или надо еще что то? И что сделать , чтобы прокрутка заработала? А то или или. А нужно все!

[Alex]

Источник цитаты И что сделать , чтобы прокрутка заработала?

Почитать внимательно тему с начала, все ответы в ней есть.

[Selena]

У меня стрелка появилась и все работает. Но прокрутка, до якорей от меню, очень быстрая, не плавная. Вставляю код для плавности, не работает стрелка! Может в этом коде ,где указать что надо? Подскажите! Целый день мучаюсь !

Отправлено спустя 1 минуту 14 секунд:
Тему всю перечитала и все перепробовала! Что смогла сама сделать . сделала! А сейчас к умным людям за помощью не грех обратиться!

[Selena]

Доброе утро! Мне кто нибудь поможет решить мою проблемку?

[Alex15963]

Поставьте расширение ultimate page scroll или ultimate page scroll2 и не заморачивайтесь

[Selena]

А подскажите, как? В коде , который прописала , исправить что то надо?

[Akimi4]

Всем привет!
А можно как нибудь сделать кнопку (картинку) что бы она не исчезала, была всегда только в низу в определенном месте и при нажатие на нее плавно прокручивала в верх. Пробовал просто на HTML до якоря, но получается просто скачек в верх, а на скрипты и всего остального ума не хватает. В общем прошу помощи. Пример работы кнопки здесь: http://demo.omegatheme.com/joomla25/ot_writer/#ot-body

[HawkHunter]

не знаю как в 11.0.3, но в 11.1.1 есть быстрый способ и без заморочек

30365095b7.jpg

[Akimi4]

обновился, есть такое дело, но реализовать в жизнь не получается

[HawkHunter]

Даём якорю или слою имя "top" (как пример), на липком слое

25-05-2016 14-21-33.jpg

делаем картинку со ссылкой

25-05-2016 14-20-25.jpg

И всё должно работать

Отправлено спустя 3 минуты 53 секунды:
Не работающий плавный скрол, может сигнализировать о конфликте скриптов или не подключенной библиотеке JS

[Akimi4]

Спасибо, всё работает,но картинка ни как не хочет быть ссылкой в футоре, над футуром всё работает как только размещаю ее в футер, все как бабка от шептала ссылки как и не бывало

все решилось настройками в подвале страницы, если кому пригодится то, уровень в стеке должен быть перед содержимым

HawkHunter, спасибо большое за помощь!

[George]

Всем привет!
Вопрос «прокрутка страницы с исчезающей стрелочкой» в этой теме раскрыт не полностью.
Хочу рассказать о способе, где Вам не нужно пользоваться никакими сторонними скриптами
и ничего никуда не нужно прописывать или вставлять «ручками».
Всё можно сделать используя только инструментарий «Web Builder».

Описание:

1.) Для начала создаём небольшой (к примеру 90 на 90 пикселей) «Липкий слой».



2.) Создаём элемент «Back to up» (вашу картинку со стелочкой «вверх» или к примеру,
я взял подходящую для этого случая иконку из набора FontAwesome и фоном к ней круглый Shape)
и помещаем его на наш «Липкий слой».



4.) Переносим всю эту композицию («Липкий слой» + группа «Back to up»)
в удобное для нас место на макете страницы.

5.) Создаём «Закладку» (Bookmark) с такими вот примерно координатами по оси «Y».



6.) Далее переходим через «Свойства объекта» к выбору «Событий»,
которые будут управлять поведением «Липкого слоя».

«Событие» первое:



«Событие» второе:



Итого должно получиться два «События»



7.) Теперь немного откорректируем размеры «Закладки» (Bookmark),
а именно его параметры по оси «Y». Можно это сделать визуально
или «забить» точные данные (напрямую зависят от высоты макета страницы).
Лично я «протягиваю» границы объекта «Закладка» (Bookmark) до соприкосновения
с объектом «Подвал страницы» (PageFooter).



8.) Открываем через «Свойства объекта» слоя «Шапка страницы» (PageHeader) раздел «Закладка».



9.) Вашей картинке со стелочкой «вверх» (в моём случае случае иконке из набора Font Awesome)



через «Свойства объекта» назначаем «Закладку».



Это тот слой (или Bookmark) к которому должен будет возвращаться броузер при нажатии кнопки «Вверх».

9.) А теперь, чтобы всё заработало, «Скрываем» элемент «Липкий слой».
Объект «Закладки» (Bookmark) тоже можно «Скрыть» (по вашему желанию).



10.) И последнее. Чтобы кнопочка «Back to up» (вдруг так задумано по дизайну) была
над объектом «Подвал страницы» (PageFooter), не забываем изменить его уровень в стеке.



Итоговый файл «Scroll.wbs» можно скачать отсюда: https://cloud.mail.ru/public/UA9Y/8cG247LPS

[Alex]

George, если внимательно посмотреть, то тема была создана аж 21 авг 2013 года, много воды утекло с тех пор и много версий программы вышло, при этом она явно выросла по функционалу. С закладками произошли большие изменения и мы это заметили давно
Однако, за подробное описание и старания, Вам безусловно +

[anonimus]

КСТАТИ, липкий слой лишний элемент и можно без него обойтись
а если делать на слое, то явно не на липком, а на обычном и при помощи пары строк css позиционировать снизу справа
так хоть дёргаться не будет

[George]

Alex и Аnonimus, спасибо Вам на добром слове

Отправлено спустя 11 минут 22 секунды:

Источник цитаты ...а на обычном и при помощи пары строк css позиционировать снизу справа
так хоть дёргаться не будет

Уважаемый "anonimus", пожалуйста, напишите эти пару строк, если Вас не затруднит конечно.
Буду премного благодарен (вероятно не я один).