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

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


Код:
$('.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);
}
Источник - Хабр и тестовая страница
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
31.07.2015 10:20
aldemko
 
ну странно
Win 7 ultimate
только скачанная мозила (с сайта разработчика, не всякие там сборки от яндекс или еще когото)
и все работает
для убедительности часа часа через 2-3 дома буду, сниму видео с экрана
31.07.2015 10:21
OlegON
 
Ты про стрелки на форуме или какой-то другой пример? Видео не обязательно, поверим. В хроме работает.
31.07.2015 10:24
aldemko
 
Именно кнопка на твоем форуме
внизу справа после Правил над счетчиком
с главной страницы если то ссылка передает следующее
31.07.2015 10:25
aldemko
 
SQL код:
<a onclick="self.scrollTo(0, 0); return false;" href="#top"></a
31.07.2015 10:30
KirillHome
 
Проверил сейчас на XP - точно так же не работают кнопки в FireFox 39.0
Миниатюры
Нажмите на изображение для увеличения
Название: FireFox вверх-вниз.JPG
Просмотров: 214
Размер:	130.4 Кб
ID:	4852  
31.07.2015 10:48
OlegON
 
Понял, вверх можно взять с текстового линка, а вниз?
31.07.2015 10:55
aldemko
 
У кого то есть идеи ?
почему у разных людей, используя один и тот же браузер, кнопка то работает то нет ?
Миниатюры
Нажмите на изображение для увеличения
Название: 1.jpg
Просмотров: 220
Размер:	191.2 Кб
ID:	4856   Нажмите на изображение для увеличения
Название: 2.jpg
Просмотров: 221
Размер:	43.2 Кб
ID:	4857   Нажмите на изображение для увеличения
Название: 3.jpg
Просмотров: 212
Размер:	357.4 Кб
ID:	4858  
31.07.2015 11:09
aldemko
 
проверяю на других пк в офисе
Windows 2008 R2
Firefox 37.0.2
Кнопка вверх работает.

Windows 7 Максимальная х64
Firefox 39 Кнопка работает

Windows 7 макс х32
Firefox 39 Кнопка работает
31.07.2015 11:19
OlegON
 
Мы вообще-то про другие кнопки... ▲ ▼
31.07.2015 11:24
aldemko
 
Блин а я тут сижу мучаю
ну тогда как вариант
вставить в верх, данные с строки вверх, а для вниз, прописать где то в шапке якорь, и по аналогии в верх направлять
31.07.2015 11:28
aldemko
 
и не знаю, имеет ли значение:
если в хроме на стрелку вверх ткнуть правой кнопой мыши, и выбрать просмотр кода элемента
там напишет следующее:
Скрытый текст (вы должны войти под своим логином или зарегистрироваться и иметь 21 сообщение(ий)):
У вас нет прав чтобы видеть скрытый текст, содержащийся здесь.
Опции темы


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

 

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