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

OlegON · █ 30.07.2015 09:41

Многие уже видели и пользуются стрелочками справа в каждом сообщении, позволяющими скроллить вверх или вниз страницы. В новых версиях Firefox они почему-то не работают.

Это я что-то не так сделал или фокс кривой? Есть какие-то другие варианты?

KirillHome · █ 30.07.2015 10:23

Вариант - заменить 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);
}

Источник - и

twix · █ 30.07.2015 15:06

Только у Олега на форуме нет jQuery

OlegON · █ 30.07.2015 15:10

Цитата:

twix ➤ Только у Олега на форуме нет jQuery

точно, нет. есть еще идеи? :(

aldemko · █ 31.07.2015 08:41

а такой вариант не подойдет ?

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

У вас нет прав чтобы видеть скрытый текст, содержащийся здесь.

aldemko · █ 31.07.2015 08:58

Свободное время есть
вот что нашел вдруг пригодиться:
Кнопка вверх - проверенные решения

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-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}

Скрытый текст (вы должны войти под своим логином или зарегистрироваться и иметь 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 {
position: fixed; /* фиксированная позиция */
opacity: 0.8; /* прозрачность */
padding: 15px 10px 10px; /* отступы */
background: #aaa;
border-radius: 5px; /* скругление углов */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
left: 10px; /* отступ слева */
bottom: 10px; /* отступ снизу */
display: none; /* спрятать блок */
cursor: pointer;
}

Далее либо добавляем js-код в уже существующий файл с остальными скриптами, либо подключаем новый:

SQL код:

 <script type='text/javascript' src='/js/scrollup.js'></script>

Дальше нужно написать саму функцию скролла.
Вариант №1: с использованием jQuery
Если у вас уже подключена jQuery, нужно сделать следующее: в scrollup.js добавляйте такой код:

SQL код:

 jQuery( document ).ready(function() {
    jQuery('#scrollup img').mouseover( function(){
        jQuery( this ).animate({opacity: 0.65},100);
    }).mouseout( function(){
        jQuery( this ).animate({opacity: 1},100);
    }).click( function(){
        window.scroll(0 ,0); 
        return false;
    });

    jQuery(window).scroll(function(){
        if ( jQuery(document).scrollTop() > 0 ) {
            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 > 0 ) {
            scrollUp.style.display = 'block';
        } else {
            scrollUp.style.display = 'none';
        }
    };
};

Демо

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

У вас нет прав чтобы видеть скрытый текст, содержащийся здесь.

исходник и источник

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

У вас нет прав чтобы видеть скрытый текст, содержащийся здесь.

aldemko · █ 31.07.2015 09:05

А и еще пожалуй один из самых простых
это использование якорей

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

У вас нет прав чтобы видеть скрытый текст, содержащийся здесь.

OlegON · █ 31.07.2015 09:20

Ну да, вверх оно так и сделано... Только не работает в Фоксе ни фига... В хроме, что мобильном, что десктопном - все нормально.

aldemko · █ 31.07.2015 09:45

не пользуюсь фоксом
ради эксперимента установил Firefox 39 вышедший 3 июля 2015
и на нем все прекрасно работает, в смысле функция кнопки вверх
может у тебя плагин какой установлен и мешает ?

OlegON · █ 31.07.2015 10:16

Пробовал отключать все - не помогает, да и не только у меня...

Цитата:

KirillHome ➤ Проверил - да, в FireFox 39 не работает (в Chrome всё нормально).
Проверял на Win'7