[ОТВЕТИТЬ]
Опции темы
30.07.2015 09:41  
OlegON
Многие уже видели и пользуются стрелочками справа в каждом сообщении, позволяющими скроллить вверх или вниз страницы. В новых версиях Firefox они почему-то не работают.

Это я что-то не так сделал или фокс кривой? Есть какие-то другие варианты?
 
30.07.2015 10:23  
KirillHome
Вариант - заменить scrollTo на что-то такое:


Код HTML:
$('.scrollup').on('click', function () {
    $('html,body').animate({ scrollTop: 0 }, 500);
    return false;
});
$('.scrolldown').on('click', function () {
    $('html,body').animate({ scrollTop: 1500 }, 500);
    return false;
});
$('.scrolltoid').on('click', function () {
    scrollToID('test');
    return false;
});
function scrollToID(theID) {
    $('html,body').animate({ scrollTop: $('#' + theID).offset().top }, 500);
}
Источник - Хабр и тестовая страница
 
"Спасибо" KirillHome от:
30.07.2015 15:06  
twix
Только у Олега на форуме нет jQuery
 
30.07.2015 15:10  
OlegON
Цитата:
Сообщение от twix
Только у Олега на форуме нет jQuery
точно, нет. есть еще идеи? :(
 
31.07.2015 08:41  
aldemko
а такой вариант не подойдет ?

Скрытый текст (вы должны войти под своим логином или зарегистрироваться и иметь 21 сообщение(ий)):
У вас нет прав чтобы видеть скрытый текст, содержащийся здесь.
 
31.07.2015 08:58  
aldemko
Свободное время есть
вот что нашел вдруг пригодиться:
Кнопка вверх - проверенные решения

1.
Для того, чтобы это сделать в любом месте, внизу вашей страницы, просто добавьте следующий код:
SQL код:
<a href="#" title="Вернуться к началу" class="topbutton">^Наверх</a
Как вы видите ссылке задан класс .topbutton используя который, при помощи CSS, вы можете придать ссылке любой, необходимый вам вид, например вид той же кнопки.

Пример CSS кода:
SQL код:
.topbutton {
width:100px;
border:2px solid #ccc;
background:#f7f7f7;
text-align:center;
padding:10px;
position:fixed;
bottom:50px;
right:50px;
cursor:pointer;
color:#333;
font-family:verdana;
font-size:12px;
border-radius5px;
-
moz-border-radius5px;
-
webkit-border-radius5px;
-
khtml-border-radius5px;

Скрытый текст (вы должны войти под своим логином или зарегистрироваться и иметь 21 сообщение(ий)):
У вас нет прав чтобы видеть скрытый текст, содержащийся здесь.



2/ Кнопка наверх с помощью jQuery
Кнопка реализована достаточно просто. Для ее функционирования понадобится библиотека jQuery, небольшой скрипт содержащий события jQuery, определенные стили и тег DIV содержащий сам текст и необходимый ID.

Кнопка работает в браузерах начиная с версий Firefox 3.0.10 - 3.6.13, Internet Explorer 7 и 8, Google Chrome, Jquery 1.4.3. К сожалению кнопка не работает в IE 6, а оно вам надо :) ?

JQuery JavaScript код:

Представленный ниже код вам необходимо вставить переде тегом </head> на всех страницах вашего сайта. Если библиотека jQuery уже подключена к вашему сайту, то первую строчку добавлять не нужно.
SQL код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
<script type="text/javascript">
 
$(function() {
 
$(window).scroll(function() {
 
if($(this).scrollTop() != 0) {
 
$('#toTop').fadeIn();
 
} else {
 
$('#toTop').fadeOut();
 
}
 
});
 
$('#toTop').click(function() {
 
$('body,html').animate({scrollTop:0},800);
 
});
 
});
 
</script> 

CSS код:

Чтобы придать красивый внешний вид кнопке необходимо добавить следующие стили. Их лучше всего добавить в файл стилей вашего сайта.

SQL код:
#toTop {
width:100px;
border:1px solid #ccc;
background:#f7f7f7;
text-align:center;
padding:5px;
position:fixed;
bottom:10px/* отступ кнопки от нижнего края страницы*/
right:10px;
cursor:pointer;
display:none;
color:#333;
font-family:verdana;
font-size:11px;


HTML код:

Для вызова кнопки добавьте следующий HTML код перед тегом </body>.
SQL код:
<DIV ID "toTop" > ^ Наверх </ DIV 
3. UItoTop JQuery плагин
Простой плагин делающий плавное появление кнопки и плавный скроллинг вверх при нажатии на ее. Чтобы задействовать плагин на своем сайте нет необходимости добавлять какие либо теги в разметку HTML страницы. Достаточно подключить все необходимые файлы плагина и он будет работать.
Демо
Скрытый текст (вы должны войти под своим логином или зарегистрироваться и иметь 21 сообщение(ий)):
У вас нет прав чтобы видеть скрытый текст, содержащийся здесь.


Исходник
Скрытый текст (вы должны войти под своим логином или зарегистрироваться и иметь 21 сообщение(ий)):
У вас нет прав чтобы видеть скрытый текст, содержащийся здесь.


и другие методы но требующие jquery
источник
Скрытый текст (вы должны войти под своим логином или зарегистрироваться и иметь 21 сообщение(ий)):
У вас нет прав чтобы видеть скрытый текст, содержащийся здесь.


Так же наткнулся на:
Как сделать «кнопку вверх» для прокрутки сайта без плагинов
Для начала добавьте в самый низ макета вашего сайта (лучше всего в footer) код кнопки:
SQL код:
<div id="scrollup"><img alt="Прокрутить вверх" src="/img/up.png"></div
CSS
SQL код:
#scrollup {
positionfixed/* фиксированная позиция */
opacity0.8/* прозрачность */
padding15px 10px 10px/* отступы */
background#aaa;
border-radius5px/* скругление углов */
-webkit-border-radius5px;
-
moz-border-radius5px;
left10px/* отступ слева */
bottom10px/* отступ снизу */
displaynone/* спрятать блок */
cursorpointer;

Далее либо добавляем js-код в уже существующий файл с остальными скриптами, либо подключаем новый:
SQL код:
<script type='text/javascript' src='/js/scrollup.js'></script> 
Дальше нужно написать саму функцию скролла.
Вариант №1: с использованием jQuery
Если у вас уже подключена jQuery, нужно сделать следующее: в scrollup.js добавляйте такой код:
SQL код:
jQuerydocument ).ready(function() {
    
jQuery('#scrollup img').mouseover( function(){
        
jQuerythis ).animate({opacity0.65},100);
    }).
mouseout( function(){
        
jQuerythis ).animate({opacity1},100);
    }).
click( function(){
        
window.scroll(,0); 
        return 
false;
    });

    
jQuery(window).scroll(function(){
        if ( 
jQuery(document).scrollTop() > ) {
            
jQuery('#scrollup').fadeIn('fast');
        } else {
            
jQuery('#scrollup').fadeOut('fast');
        }
    });
}); 
Если jQuery еще не подключен, тогда перед подключением scrollup.js нужно подключить ее:
SQL код:
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script> 
Вариант №2: на простом js
Если вы любите простоту, можно обойтись простым javascript:
SQL код:
window.onload = function() { // после загрузки страницы

    
var scrollUp document.getElementById('scrollup'); // найти элемент

    
scrollUp.onmouseover = function() { // добавить прозрачность
        
scrollUp.style.opacity=0.3;
        
scrollUp.style.filter  'alpha(opacity=30)';
    };

    
scrollUp.onmouseout = function() { //убрать прозрачность
        
scrollUp.style.opacity 0.5;
        
scrollUp.style.filter  'alpha(opacity=50)';
    };

    
scrollUp.onclick = function() { //обработка клика
        
window.scrollTo(0,0);
    };

// show button

    
window.onscroll = function () { // при скролле показывать и прятать блок
        
if ( window.pageYOffset ) {
            
scrollUp.style.display 'block';
        } else {
            
scrollUp.style.display 'none';
        }
    };
}; 
Демо
Скрытый текст (вы должны войти под своим логином или зарегистрироваться и иметь 21 сообщение(ий)):
У вас нет прав чтобы видеть скрытый текст, содержащийся здесь.

исходник и источник
Скрытый текст (вы должны войти под своим логином или зарегистрироваться и иметь 21 сообщение(ий)):
У вас нет прав чтобы видеть скрытый текст, содержащийся здесь.
 
31.07.2015 09:05  
aldemko
А и еще пожалуй один из самых простых
это использование якорей
Скрытый текст (вы должны войти под своим логином или зарегистрироваться и иметь 21 сообщение(ий)):
У вас нет прав чтобы видеть скрытый текст, содержащийся здесь.
 
31.07.2015 09:20  
OlegON
Ну да, вверх оно так и сделано... Только не работает в Фоксе ни фига... В хроме, что мобильном, что десктопном - все нормально.
 
31.07.2015 09:45  
aldemko
не пользуюсь фоксом
ради эксперимента установил Firefox 39 вышедший 3 июля 2015
и на нем все прекрасно работает, в смысле функция кнопки вверх
может у тебя плагин какой установлен и мешает ?
 
31.07.2015 10:16  
OlegON
Пробовал отключать все - не помогает, да и не только у меня...
Цитата:
Сообщение от KirillHome
Проверил - да, в FireFox 39 не работает (в Chrome всё нормально).
Проверял на Win'7
 
 


Опции темы



Часовой пояс GMT +3, время: 00:17.

Все в прочитанное - Календарь - RSS - - Карта - Вверх 👫 Яндекс.Метрика
Форум сделан на основе vBulletin®
Copyright ©2000 - 2016, Jelsoft Enterprises Ltd. Перевод: zCarot и OlegON
В случае заимствования информации гипертекстовая индексируемая ссылка на Форум обязательна.