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

[Katebay]

Сделала тоже самое все работает))Спасибо!
Но у меня кнопки почему-то заходят за слои, хотя все слои находятся на заднем плане. Подскажите пожалуйста как это исправить?

[Chivers]

У меня такая же проблема. Стрелки, заходят за другие слои, смотрится сами понимаете(ужасно) каким образом это можно исправить?
Учитывая практически 0 знания ХТМЛ, помогите пожалуйста изменить код, чтобы не было нижней стрелки, а только верхняя.

[art18012009]

<a style='position: fixed; z-index: 1000; bottom: 94px; right: 10px; cursor:pointer; display:none;'
необходимо прописать "z-index: 1000" между "position: fixed;" и "bottom: 94px;"
ну 1000 необязательно, но чем выше число тем как-бы выше находится этот элемент относительно других слоев, как-то так...

[aramis]

Спасибо Алекс!

[Naushi]

Здравствуйте. Перестала появляться форма заказа (при нажатии на кнопку "заказать") после того, как вставил код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="scroll-startstop.events.jquery.js" type="text/javascript"></script>
<a style='position: fixed; bottom: 94px; right: 10px; cursor:pointer; display:none;'
href='#' id='Go_Top'>
<img src="images/up.png" alt="Вверх" title="Вверх">
</a>
<a style='position: fixed; 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()>="250") $("#Go_Top").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()<="250") $("#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>

при этом, стрелки вверх \ вниз работают отлично.

Подскажите, пожалуйста, что нужно еще сделать? я фактически новичок в этом деле программирования...

[gladiolus0707]

Здравствуйте. Перестала появляться форма заказа (при нажатии на кнопку "заказать") после того, как вставил код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="scroll-startstop.events.jquery.js" type="text/javascript"></script>
<a style='position: fixed; bottom: 94px; right: 10px; cursor:pointer; display:none;'
href='#' id='Go_Top'>
<img src="images/up.png" alt="Вверх" title="Вверх">
</a>
<a style='position: fixed; 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()>="250") $("#Go_Top").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()<="250") $("#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>

при этом, стрелки вверх \ вниз работают отлично.

Подскажите, пожалуйста, что нужно еще сделать? я фактически новичок в этом деле программирования...

Скорее всего у Вас конфликт скриптов. Того что Вы поставили с лайтбоксом.

[Naushi]

Здравствуйте. Перестала появляться форма заказа (при нажатии на кнопку "заказать") после того, как вставил код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="scroll-startstop.events.jquery.js" type="text/javascript"></script>
<a style='position: fixed; bottom: 94px; right: 10px; cursor:pointer; display:none;'
href='#' id='Go_Top'>
<img src="images/up.png" alt="Вверх" title="Вверх">
</a>
<a style='position: fixed; 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()>="250") $("#Go_Top").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()<="250") $("#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>

при этом, стрелки вверх \ вниз работают отлично.

Подскажите, пожалуйста, что нужно еще сделать? я фактически новичок в этом деле программирования...

Скорее всего у Вас конфликт скриптов. Того что Вы поставили с лайтбоксом.

Скажите, а как избежать этого конфликта? как сделать так, чтоб и лайтбокс работал и стрелки?

[ihark]

Итак, благодарю О Великий Интернет! и всех, кто создал эту тему. Она явилась отправной точкой поисков обозначенной проблемы, но код, представленный в начале темы, явно устарел и поэтому понятно, что он будет конфликтовать с более новым кодом jquery, который используется для того же лайтбокса или слайшоу.

Порывшись в сети и сделав несколько неудачных экспериментов, я вывел свою формулу успеха. Теперь у вас будут работать и стрелки, и лайтбокс.
P.S. Если быть точнее, то одна стрелка - прокрутки вверх. Я считаю нецелесообразным применять стрелку прокрутки вниз страницы.

Итак, по порядку!

Первый шаг: создаем объект посредством контейнера div, в который вставляем изображение нужной нам стрелки. Для этого вставляем приведенный ниже код в конец страницы перед закрывающим тегом </body>. Путь к изображению задается атрибутом src тега img. Да, и не забудьте залить в нужную папку изображение!!!

Код: Выделить всё

<div id="back_to_top">
   <img src="images/up_arrow.png" alt="Наверх" title="Наверх">
</div>

Второй шаг: прописываем стили CSS нашего элемента. Для этого вставляем приведенный ниже код между тегами <head></head> страницы. Отступы элемента задаются свойствами right и bottom.
Примечание: если на вашей странице много элементов, то можно увеличить свойство z-index до 1000.

Код: Выделить всё

<style>
#back_to_top {
   position: fixed;
   z-index: 500;
   bottom: 25px;
   right: 55px;
   display:none;
}
#back_to_top:hover {
   cursor:pointer
}
</style>

Третий шаг: подключаем скрипт jquery, который отвечает за осуществление нужных нам действий. Для этого вставляем приведенный ниже код между тегами <head></head> страницы. Здесь 400 - расстояние в пикселах от верха страницы, при скроллинге на которое будет появляться кнопка прокрутки. Естественно. его можно менять. 800 - время в миллисекундах, в течение которого происходит плавная прокрутка страницы вверх.
Примечание. Если у вас нет на странице элементов, использующих jquery, то эту библиотеку нужно предварительно подключить, прописав между тегами <head></head> страницы строчку кода: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>.

Код: Выделить всё

<script>
$(document).ready(function(){
   // появление/затухание кнопки #back_to_top
   $(function (){
      $(window).scroll(function (){
         if ($(this).scrollTop() > 400){
            $("#back_to_top").fadeIn();
         } else{
            $("#back_to_top").fadeOut();
         }
      });

      // при клике на ссылку плавно поднимаемся вверх
      $("#back_to_top").click(function (){
         $("body,html").animate({
            scrollTop:0
         }, 800);
         return false;
      });
   });
});
</script>

Вот что получилось у меня: http://icitymall.ru/landings/playstation_4.php

Всем спасибо за внимание!

[gladiolus0707]

зачем же так много мороки Расширение ultimate page scroll не конфликтит с лайтбоксом и остальными, так что можно ставить его для прокрутки и не заморачиваться.

[maczzz]

Все отлично получилось!!! Автору большое спасибо!!!

[paxen]

Люди а как создать одну кнопку прокрутки?

Отправлено спустя 9 минут 31 секунду:
с помощью слоя имею в виду

[anonimus]

Источник цитаты Люди а как создать одну кнопку прокрутки?

вопрос не ясен

[Windwolf]

Автору СПАСИБО, тоже всё получилось!)

[alexa]

блин как сделать чтобы стрелка вверх в низ не праталас под слоями?
а то пол стрелки видно а половина нет,

Спасибо!

[anonimus]

блин как сделать чтобы стрелка вверх в низ не праталас под слоями?
а то пол стрелки видно а половина нет,

Спасибо!

поставьте
z-index: 9999;

[alexa]

блин как сделать чтобы стрелка вверх в низ не праталас под слоями?
а то пол стрелки видно а половина нет,

Спасибо!

поставьте
z-index: 9999;

И КУДА ЕГО ВСТАВЛЯТЬ? ))))

[anonimus]

Источник цитаты И КУДА ЕГО ВСТАВЛЯТЬ? ))))

так вы в код, который вставляли в свой сайт посмотрите и поймёте

Код: Выделить всё

<style>
#back_to_top {
   position: fixed;
   z-index: 500;
   bottom: 25px;
   right: 55px;
   display:none;
}
#back_to_top:hover {
   cursor:pointer
}
</style>

[Sveta2608]

С цветом ссылок разобралась, теперь тут отмечусь
В исходнике вот так
<a id="Go_Top" style="position:fixed; bottom:94px; right:10px; cursor:pointer; display:none;"
href="#" id="Go_Top">
<img src="images/up.png" alt="Наверх" title="Наверх">
</a>

картинку с кнопкой в папку залила)))) кнопка вверх видна, а чего та не прокручивает чего ей еще надо то?
скрипт естественно в исходнике тоже стоит))

[Alex15963]

Попробуйте вот так :

Код: Выделить всё

<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>

[Alex15963]

Добрый день! После обновления Web Builder перестали работать стрелки по коду Alexa. До обновления, вставлял на сайты без проблем. В чем проблема, подскажите?