Форум OlegON > Компьютеры и Программное обеспечение > Сеть > Создание сайтов и поисковая оптимизация (SEO)

Как правильно сделать скролл вверх или вниз страницы? : Создание сайтов и поисковая оптимизация (SEO)

29.03.2024 4:34


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
Часовой пояс GMT +3, время: 04:34.

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