Дополнительные модификации кнопки «Наверх»

Это статья — продолжение к моему старому посту про кнопку наверх, который с момента публикации набрал максимальное количество просмотров среди остальных постов на блоге и 95 комментариев!

Вот скрин из Google Analytics, топ 3 поста на блоге с момента публикации «кнопки наверх»:

кнопка наверх в Google Analytics

Отрыв практически в два раза, впечатляет :)

В комментах меня просили, и не раз, сделать точную копию кнопки как вконтакте, то есть чтобы при прокрутке наверх она превращалась в кнопку «Назад» (это было в то время), а сейчас там кнопка немного поменялась и теперь её можно назвать кнопкой «Вверх-вниз» (возвращает обратно в ту часть страницы, откуда вы нажали «наверх». Сегодня я распишу оба варианта.

1. Кнопка «Наверх-Назад» (на предыдущую страницу)

Теория этой кнопки в том, что когда человек нажал на кнопку «наверх», ему захочется вернуться на предыдущую просмотренную страницу (разве что предыдущая страница — результаты поиска в Google) и поэтому ему необходимо предложить такую возможность.

HTML

Сначала HTML-код, вставьте его куда-нибудь на своё усмотрение, я бы засунул перед закрывающим тегом </body>:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="button_back.js"></script>
<div id="top-link">
	<a href="#top">наверх</a>
</div>

Повторю ещё раз, если кнопка не работает, попробуйте при подключении файла button_back.js прописать абсолютный URL.

CSS

#top-link{
	cursor:pointer;
	display:none;
	position:fixed;
	top:0px;
	bottom:0px;
	padding-left:5px;
	padding-top:5px;
	z-index:1;
}
#top-link a{
	display:block;
}

jQuery

Это содержимое файла button_back.js. Обратите внимание на ID основного блока с контентом на 3-й строчке кода, у меня это #content, а у вас может быть что-нибудь другое, например #wrapper или #container.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
jQuery.extend(jQuery.fn, {
	toplinkwidth: function(){
		totalContentWidth = jQuery('#content').outerWidth(); // ширина блока с контентом, включая padding
		totalTopLinkWidth = jQuery('#top-link').children('a').outerWidth(true); // ширина самой кнопки наверх, включая padding и margin
		h = jQuery(window).width()/2-totalContentWidth/2-totalTopLinkWidth;
		if(h<0){
			// если кнопка не умещается, скрываем её
			jQuery(this).hide();
		} else {
			if(jQuery(window).scrollTop() >= 1){
				jQuery(this).show();
			}
			jQuery(this).css({'padding-right': h+'px'});
		}
	}
});
 
jQuery(function($){
	var topLink = $('#top-link');
	topLink.css({'padding-bottom': $(window).height()});
	// если вам не нужно, чтобы кнопка подстраивалась под ширину экрана - удалите следующие четыре строчки в коде
	topLink.toplinkwidth();
	$(window).resize(function(){
		topLink.toplinkwidth();
	});
	$(window).scroll(function() {
		if($(window).scrollTop() >= 1) {
			topLink.fadeIn(300).children('a').html('наверх').parent().removeAttr("onClick");
		} else {
			topLink.children('a').html('назад').parent().attr("onClick", "history.back()");
		}
	});
	topLink.click(function(e) {
		$("body,html").animate({scrollTop: 0}, 500);
		return false;
	});
});

P.S. в примере я особо не заморачивался с оформлением кнопки — всё только самое необходимое, если вам нужно оформление — смотрите или скачивайте демо.

2. Кнопка «Наверх-Вниз» (обратно в ту часть страницы, где был переход наверх)

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

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

Подробнее о том, как определить текущее местонахождение на странице.

Итак, погнали.

HTML и CSS

Тут практически всё точно также, как и в предыдущем примере (но в демо есть некоторые отличия в CSS), единственное только я назвал по-другому файл со скриптами, button_down.js:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="button_down.js"></script>
<div id="top-link">
	<a href="#top">наверх</a>
</div>
#top-link{
	cursor:pointer;
	display:none;
	position:fixed;
	top:0px;
	bottom:0px;
	padding-left:5px;
	padding-top:5px;
	z-index:1;
}
#top-link a{
	display:block;
}

jQuery + плагин scrollTo

Содержимое файла button_down.js, опять-таки не забывает изменить ID элемента #content.

;(function($){var h=$.scrollTo=function(a,b,c){$(window).scrollTo(a,b,c)};h.defaults={axis:'xy',duration:parseFloat($.fn.jquery)>=1.3?0:1,limit:true};h.window=function(a){return $(window)._scrollable()};$.fn._scrollable=function(){return this.map(function(){var a=this,isWin=!a.nodeName||$.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!isWin)return a;var b=(a.contentWindow||a).document||a.ownerDocument||a;return/webkit/i.test(navigator.userAgent)||b.compatMode=='BackCompat'?b.body:b.documentElement})};$.fn.scrollTo=function(e,f,g){if(typeof f=='object'){g=f;f=0}if(typeof g=='function')g={onAfter:g};if(e=='max')e=9e9;g=$.extend({},h.defaults,g);f=f||g.duration;g.queue=g.queue&&g.axis.length>1;if(g.queue)f/=2;g.offset=both(g.offset);g.over=both(g.over);return this._scrollable().each(function(){if(e==null)return;var d=this,$elem=$(d),targ=e,toff,attr={},win=$elem.is('html,body');switch(typeof targ){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(targ)){targ=both(targ);break}targ=$(targ,this);if(!targ.length)return;case'object':if(targ.is||targ.style)toff=(targ=$(targ)).offset()}$.each(g.axis.split(''),function(i,a){var b=a=='x'?'Left':'Top',pos=b.toLowerCase(),key='scroll'+b,old=d[key],max=h.max(d,a);if(toff){attr[key]=toff[pos]+(win?0:old-$elem.offset()[pos]);if(g.margin){attr[key]-=parseInt(targ.css('margin'+b))||0;attr[key]-=parseInt(targ.css('border'+b+'Width'))||0}attr[key]+=g.offset[pos]||0;if(g.over[pos])attr[key]+=targ[a=='x'?'width':'height']()*g.over[pos]}else{var c=targ[pos];attr[key]=c.slice&&c.slice(-1)=='%'?parseFloat(c)/100*max:c}if(g.limit&&/^\d+$/.test(attr[key]))attr[key]=attr[key]<=0?0:Math.min(attr[key],max);if(!i&&g.queue){if(old!=attr[key])animate(g.onAfterFirst);delete attr[key]}});animate(g.onAfter);function animate(a){$elem.animate(attr,f,g.easing,a&&function(){a.call(this,e,g)})}}).end()};h.max=function(a,b){var c=b=='x'?'Width':'Height',scroll='scroll'+c;if(!$(a).is('html,body'))return a[scroll]-$(a)[c.toLowerCase()]();var d='client'+c,html=a.ownerDocument.documentElement,body=a.ownerDocument.body;return Math.max(html[scroll],body[scroll])-Math.min(html[d],body[d])};function both(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery);
 
jQuery.extend(jQuery.fn, {
	toplinkwidth: function(){
		totalContentWidth = jQuery('#content').outerWidth(); // ширина блока с контентом, включая padding
		totalTopLinkWidth = jQuery('#top-link').children('a').outerWidth(true); // ширина самой кнопки наверх, включая padding и margin
		h = jQuery(window).width()/2-totalContentWidth/2-totalTopLinkWidth;
		if(h<0){
			// если кнопка не умещается, скрываем её
			jQuery(this).hide();
		} else {
			if(jQuery(window).scrollTop() >= 1){
				jQuery(this).show();
			}
			jQuery(this).css({'padding-right': h+'px'});
		}
	}
});
 
jQuery(function($){
	var topLink = $('#top-link');
	topLink.css({'padding-bottom': $(window).height()});
	// если вам не нужно, чтобы кнопка подстраивалась под ширину экрана - удалите следующие четыре строчки в коде
	topLink.toplinkwidth();
	$(window).resize(function(){
		topLink.toplinkwidth();
	});
	$(window).scroll(function() {
		if($(window).scrollTop() >= 1) {
			topLink.fadeIn(300).children('a').html('наверх').parent().removeClass('bottom_button').addClass('top_button');
		} else {
			topLink.children('a').html('вниз').parent().removeClass('top_button').addClass('bottom_button');
		}
	});
	topLink.click(function(e) {
		if($(this).hasClass('bottom_button')){
			// при нажатии на кнопку «Вниз» переходим туда, где прекратили чтение
			$("body").scrollTo( pos + 'px', 500 );
		} else{
			// определяем и запоминаем координаты того места страницы, откуда был совершен переход наверх
			pos = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
			$("body,html").animate({scrollTop: 0},500);
		}
		return false;
	});
});

Работоспособность кода протестирована в браузерах Google Chrome, Mozilla Firefox и Opera (в актуальных на момент обновления данной статьи версиях).

Подпишитесь, чтобы раз в неделю получать свежие статьи с блога по email.

Смотрите также

Комментарии 146

  • Ник18 октября 2012 в 16:10 #

    Код не возвращает страницу вниз, на исходное место. Или вот это

    // опеделение позиции по горизонтали
    var posLeft =(window.pageXOffset!== undefined)? window.pageXOffset:(document.documentElement|| document.body.parentNode|| document.body).scrollLeft;
    // определение позиции по вертикали
    var posTop =(window.pageYOffset!== undefined)? window.pageYOffset:(document.documentElement|| document.body.parentNode|| document.body).scrollTop;

    Нужно вставить куда-то?

    • Миша18 октября 2012 в 19:10 #

      хм, ты уверен? не, этот код не вставляй

      я несколько раз протестил перед публикацией, на каком браузере не работает?
      попробуй демо скачать, посмотреть как там

      • Ник18 октября 2012 в 20:10 #

        Не на 100%, но по крайней мере у меня не работает. Качал демо, аналогично. се пути правильно прописал. Использую Google Chrome, последнюю.

        • Дмитрий25 января 2014 в 20:01 #

          Все отлично работает!С первого раза поставил и все работает.Работает и ВЕРХ и ВНИЗ.Руки выпрямите и все получиться.

  • Ник18 октября 2012 в 20:10 #

    jquery подключен в function.php (Последний), функция вывода подключена в футере. Стили прописаны, путь к button.js, абсолютный. Даже не знаю в чем проблема.

    • Миша18 октября 2012 в 21:10 #

      ну а демо само работает?

      • Никита20 октября 2012 в 00:10 #

        Как ни странно, демка работает. Буду пробовать ковырять. 

      • Никита21 октября 2012 в 23:10 #

        Вот теперь точно могу сказать, что скрипт не полностью работает. А именно прокрутка вниз.

      • Миша22 октября 2012 в 08:10 #

        ты лучше точно скажи в каком месте он не работает) и в каком браузере) я ведь тестировал перед тем как залить как-никак))

      • Никита22 октября 2012 в 13:10 #

        В каком месте? Ну я хз как узнать в каком, но прокрутка вниз не робит. Только вверх. Юраузер гугл хром последний ) локальный сервер денвер.

      • Миша22 октября 2012 в 13:10 #

        ну ок, спасибо, ещё раз всё перепроверю) в течение недели будет плагин на WordPress про эту кнопку

      • Никита22 октября 2012 в 20:10 #

        Перепроверь пожалуйста. И кстати, хотелось бы видеть скрипт как сейчас. Т.е использовать плагин ради этой цели я не хочу ибо это глупо на мой взгляд. Можно ведь кодом все реализовать.

      • Миша22 октября 2012 в 21:10 #

        ты не хочешь, а кто-то хочет))

      • Миша23 октября 2012 в 12:10 #

        сделал всё пошагово, как в статье - работает.

      • Ник23 октября 2012 в 15:10 #

        В чем-же дело тогда

    • Евгений7 ноября 2012 в 13:11 #
      $('#top-link').click(function(e) {if($(this).hasClass('bottom_button')){jQuery("body,html").animate({scrollTop: pos},500); //Новая прокрутка//jQuery("body").scrollTo( pos + 'px', 500 ); //Старая прокрутка} else{pos = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;jQuery("body,html").animate({scrollTop: 0},500);}return false;});

      Аналогичная проблема была с прокруткой вниз. Причем только в хроме, все остальные браузеры отрабатывали ее на ура.Пришлось внести некоторые изменения что бы она заработала. 

      • Миша7 ноября 2012 в 23:11 #

        точно-точно, в новых версиях хрома пошли косяки,  я помню ещё код дорабатывал, видимо не до конца)спасибо за поправку

  • Олег18 октября 2012 в 21:10 #

    А где иконки ">" и "<" и css к ним?

  • Олег18 октября 2012 в 21:10 #

    у меня такая проблема

  • Макс19 октября 2012 в 01:10 #

    Сделай дизайн такой как в контакте, у меня не получается сделать

  • Михаил19 октября 2012 в 08:10 #

    Даешь плагин для WordPress! Готов даже купить за PayPal. 

  • Иван6 ноября 2012 в 15:11 #

    А как реализовать, чтобы была видна не только кнопка, но и поле слева? (именно как вконтакте). Пробовал совместить два решения, это и еще одно, где видно поле, но не получается :)

  • Иван6 ноября 2012 в 23:11 #

     Блин, как все просто. но теперь проблемка образовалась. Где задается ширина этого поля? В CSS прописать не получается. В button.js задается ширина кнопки, но она не равна ширине поля.Заранее спасибо.

    • Миша7 ноября 2012 в 07:11 #

      ширина задается через padding где-то в скриптах)

    • Миша7 ноября 2012 в 07:11 #

      если быть точным, то вот тут:

      function mytoplink() {
      		var h = $(window).width()/2-800/2-100;
      		if(h<0){
      			$('#top-link').addClass('veryhidden');
      		} else {
      			$('#top-link').removeClass('veryhidden');
      			$('#top-link').css({'padding-right': h+'px'});
      		}
      	}
      • Иван7 ноября 2012 в 08:11 #

        Я там тоже задавал :) В скрипте ширина сайта - 1040, ширина поля - 90. Но ширина поля получается все намного больше заданного, т.е. все пространство от левой границы сайты, до конца окна браузера.

      • Иван7 ноября 2012 в 08:11 #

        Если играться с шириной сайта, например указать ширину 1240, то можно подобрать поле нормальной ширины, но на компьютерах с более низким разрешением по ширине не будет отображаться кнопка

      • Миша7 ноября 2012 в 12:11 #
        var h = $(window).width()/2-800/2-100;

        вот тут 800 - ширина сайта, 100 - ширина кнопки, а остальное он сам вычислит)
        можно вообще h поставить каким-то фиксированным числом, это и получится, что ширина всего блока #top-link будет h+ширина кнопки))

      • Иван7 ноября 2012 в 17:11 #

        я про это и писал. У меня эти параметры var h = $(window).width()/2-1040/2-90;И все поле от границы сайта до границы браузера кликабельно :) И в твоем примере тоже. кстати

      • Миша7 ноября 2012 в 23:11 #

        ну ведь это и значит, что всё ок) а если надо сделать фиксированной ширину, то просто вместо всего параметра h пишешь какое-нибудь число

  • alexneon11 ноября 2012 в 12:11 #

    Всем привет, а можете подсказать то что здесь описано на dle 9,4 будет работать, если нет Миша можешь сделать чтоб под Dle работало? И еще очень очень прошу тебя можешь сделать готовое решение для dle чтоб было как на kinopoisk.ru то есть левая сторона активная при наведении сразу была вверху стрелочка а при наведении на стрелочку появлялась кнопочка "Вверх" то есть как я читал тут что есть кнопка назад я считаю это лишняя заморочка и она не нужна. Нужно только чтоб было как на кинопоиске. И я понимаю что может это наглость можно ли еще и мануал чтоб было написано куда что вставлять )))) Буду очень благодарен, если это будет не бесплатно напиши сколько будет стоить.

    • Миша11 ноября 2012 в 13:11 #

      весь этот код будет работать на любом движке) он не зависим от WP, а чтобы сделать как на кинопоиске, там надо немного с CSS поиграться, только и всего :)

      • alexneon11 ноября 2012 в 13:11 #

        Ну а ты не сможешь довести это все чтоб как на кинопоиске, а то я просто в этом не разбираюсь, если это платно скажи сколько будет стоить, ну просто очень хочется такую штуку на сайт а я в этом ничего не понимаю

      • Миша11 ноября 2012 в 13:11 #

        да) вот как это будет:

        #top-link:hover{
        	background:#fff; /* меняем на необходимый цвет */
        }
  • alexneon11 ноября 2012 в 14:11 #

    Ясн, ну я так понял что в твоем примере что тут выложен уже есть стрелочка а потом при наведении появляется еще кнопочка "вверх" ? В общем сейчас буду пробовать.

  • alexneon11 ноября 2012 в 15:11 #

    В общем сделал вроде как ты тут описывал, есть несколько вопросов.
    Первое куда нужно вставить то что ты написал

    #top-link:hover{
    	background:#fff; /* меняем на необходимый цвет */
    }

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

  • alexneon11 ноября 2012 в 15:11 #

    И еще вот попробовал когда браузер меняю размер то есть делаю меньше то пропадает кликабельно место с левой стороны и слова вверх и низ, в общем я видел ты тут общался с парнем вот как он сделал то мне очень понравилось хотелось бы так же smotronik.16mb.com

    • Миша11 ноября 2012 в 17:11 #

      да-да, он тоже хотел как на кинопоиске) напиши ему, спроси как реализовал) или глянь какие CSS-стили используются у него на сайте) ну и HTML тоже глянь

  • alexneon11 ноября 2012 в 17:11 #

    Ок, я его вконтакте уже нашел но он пока что не онлайн, в общем спасибо попробую у него расспросить, еще раз спасибо.

  • Юрий27 ноября 2012 в 22:11 #

    вот интересно, а читающие блог умеют пользоваться отладчиками js, чтоб самостоятельно найти проблему, устранить ее, и запостить тут...

    • Миша28 ноября 2012 в 08:11 #

      за всё время существования блога нашелся только один человек, который так поступил))

  • Cherrygarden10 декабря 2012 в 22:12 #

    Если у кого возникнут проблемы с конфликтом с другими плагинами (не будет работать кнопка "наверх" и "вниз" как вконтакте) на wordpress, то рекомендую все обращении к jQuery "$." и "$(" заменить на "jQuery." и "jQuery(" кроме первой строки.

    @truemisha, спасибо за скрипт.

  • Олег30 декабря 2012 в 19:12 #

    у меня скрипт не работает на firefox 17

  • Радик5 января 2013 в 06:01 #

    у меня скрипт не работает (((

    второй скрипт

  • Гена11 февраля 2013 в 23:02 #

    Имхо лучшая статья на эту тему, поэтому и популярная.
    Миша, а почему на своем сайте не используешь эту кнопку?

  • Дмитрий10 июня 2013 в 12:06 #

    Не робит кнопка у меня - в низ не крутит ((

    Почитал коменты, увидел что кто-то уже доработал малеха ее, можно ли внести все необходимые доработки и обновить архив для скачки?

    • Миша10 июня 2013 в 20:06 #

      только версия из архива не работает?
      демо норм? или демо тоже не робит
      какой браузер?

      • Дмитри19 июня 2013 в 09:06 #

        Демо работает как полагается. . .никак не пойму почему у меня не работает из архива.

        Работает на вверх. обратно не возвращает. (*хотя сейчас радую и просто кнопкой на вверх, но возврат тоже пригодился бы)

  • Аноним19 июня 2013 в 09:06 #

    Хорошая работа, спасибо Михаил.

  • yaskin2 июля 2013 в 22:07 #

    в css троян

  • Daniel25 августа 2013 в 00:08 #

    Привет! Сразу хочу отметить, что в демо кнопочка №2 выглядит отлично, и поэтому я решил ее естановить на свой сайт (http://body-builder.org/)
    Все сделал по инструкции, но результат был не такйо красивый, как ожидал:
    1) кликабельное поле прозрачно, также отсутствует надпись вверх/вниз(в опере) и картинка
    2)кликабельное поле немного залазит на страницу контента.
    Пожалуйста, помоги решить эти проблемы, чтобы скрипт выглядил на на демо. Спасибо!

    • Миша30 августа 2013 в 11:08 #

      Добрый день,
      для начала хочу извиниться за долгий ответ, был в отъезде и поэтому не было возможности отвечать на комментарии (инета не было).

      1) кликабельное поле прозрачно, также отсутствует надпись вверх/вниз(в опере) и картинка

      в Опере всё ок с надписью. А какая должна быть картинка?

      2)кликабельное поле немного залазит на страницу контента

      да, вижу, для этого как вариант можно прописать ширину и кнопки и контента вручную, пример для твоего сайта:

      1
      2
      3
      4
      
      jQuery.extend(jQuery.fn, {
      	toplinkwidth: function(){
      		totalContentWidth = 976; // контент
      		totalTopLinkWidth = 39; // кнопка
    • Миша30 августа 2013 в 11:08 #

      для того, чтобы поле при наведении изменяло цвет, помогут следующие CSS стили:

      #top-link:hover {
      	background: #fe0000;
      }
      • Daniel30 августа 2013 в 16:08 #

        Попробовал прописать ширину и кнопки и контента вручную - работает! спасибо!
        А на счет цвета, то когда я это

        #top-link:hover {
        	background: #fe0000;
        }

        вставил, полоса слева при наведении стала ярко красной)) как можно отрегулировать код под нужный цвет?
        и на счет картинки - я говорил о надписи вверх/вниз и треугольничке рядом. их тоже нету

        • Миша30 августа 2013 в 16:08 #

          пожалуйста)
          да, конечно, можно подобрать цвет при помощи например фотошопа и заменить #fe0000 (красный) на нужный шеснадцатиричный код цвета.

        • Миша30 августа 2013 в 16:08 #

          а треугольничек можно сделать либо при помощи картинки, либо при помощи &#9650;

          • Daniel30 августа 2013 в 16:08 #

            второй вариант по-лучше) спасибо! сделаю цвет с помощью фотошопа.
            а этот код треугольника и надпись верх вниз, чтобы менялись, когда надо -как это сделать?) тоесьт вниз спускаешься - видна треугольник вверх и надпись вверх, и наоборот соответсвенно, как в демо

            • Миша30 августа 2013 в 16:08 #

              ну вот, подписываешь соответствующие коды треугольника к каждой надписи, к надписи "вверх" - треугольник вверх, код которого я дал, а к надписи "вниз" - код треугольника вниз, я его не знаю, погугли))

  • Daniel30 августа 2013 в 20:08 #

    спасибо!

  • Kos29 сентября 2013 в 01:09 #

    Здравствуйте, Миша!
    Такой вопрос, а можно ли сделать так, чтобы без прокрутки сразу была видна кнопка "назад", кнопка "наверх" вообще не нужна.
    Буду очень благодарен за ответ.))
    И, кстати, у Вас отличный блог, очень полезная информация))

  • DcVersus22 декабря 2013 в 13:12 #

    Уважаемый, спасибо за статью, мне очень понравилось изложение) Только вот кнопку "Демо", наверно было бы лучше в начале разместить) Зашёл, нажал посмотрел о чём буквы, нужно прочитал, не нужно пошёл дальше), но это моё мнение)

    И ещё кое что, " либо засунуть прямо в HTML-код в атрибуте ." Вот этому лучше не учить зябликов, а то ведь так и сделают) Это очень плохой тон, нужно содержимое от оформления отделять, это очень важно, я считаю) Тем более, что ворпресс предоставляет удобную возможно редактировать css из панели управления)

  • Артём4 января 2014 в 15:01 #

    Вообще не понятно ничего, куда файлы закидывать нужно хоть бы указали.

  • Артём4 января 2014 в 16:01 #

    Вроде как разобрался, но не во всём.
    Поставлю лучше плагин, ведь инструкция не полная, а напрямую выяснять затянется на комментов 5 =)
    А в плагине можно что-то поменять, например при наведении задний фон кнопки сделать другим цветом.

  • Денис8 января 2014 в 20:01 #

    Я бы посоветовал добавить пару строчек в код: если человек сам прокрутит вниз, а затем сам прокрутит вверх, то надпись "вниз" не пропадет, но если на нее нажать - ничего не произойдет.
    Вот что обновил я (файл button_down.js):

    ...
    jQuery(function($){	
    	var topLink = $('#top-link');
    	var top_true = false; // !!!
    ...
    $(window).scroll(function() {	
    		if($(window).scrollTop() >= 1) {
    			topLink.fadeIn(300).children('a').html('наверх').parent().removeClass('bottom_button').addClass('top_button');
    		} else {	
    			if(top_true)
    			{			
    				topLink.children('a').html('вниз').parent().removeClass('top_button').addClass('bottom_button');
    			}
    			else
    			{ // !!!			
    				topLink.children('a').html('вниз').parent().hide(); // Если человек прокрутил к верху сам, то прячем блок
    			}
    		}
    	});
    	topLink.click(function(e) {	
    		if($(this).hasClass('bottom_button')){
    			// при нажатии на кнопку «Вниз» переходим туда, где прекратили чтение
    			$("body").scrollTo( pos + 'px', 500 );
    			top_true = false; // !!!
    		} else{
    			// определяем и запоминаем координаты того места страницы, откуда был совершен переход наверх
    			pos = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
    			top_true = true; // !!!
    			$("body,html").animate({scrollTop: 0},500);
    		}
    		return false;
    	});
    ...
  • Олег4 февраля 2014 в 02:02 #

    Все получилось большая благодарность автору скрипта !!

    - только один вопрос
    Сейчас кнопка слева а как сделать чтоб она справа была ???

    Пересмотрел все коды чето не нашел что изменить.

    • Василий4 февраля 2014 в 07:02 #

      Вместо

      top-link {
      ...
      left: 0px;
      ...
      }

      Прописать

      top-link {
      ...
      right: 0px;
      ...
      }

      И всё прекрасно перенесётся направо)

  • anton15 февраля 2014 в 15:02 #

    Проверьте button_down.js который в загружаемом архиве с исходниками кнопки «Наверх-Вниз», он отличается от того, что в демке. В результате не корректно работает скрытие кнопки, если она не помещается на экране. В демке все работает корректно. И спасибо большое за скрипт, работает отлично, лучше не нашел!

    • Миша16 февраля 2014 в 21:02 #

      Спасибо, что отписались - исправлено.
      Рад, что смог помочь :)

      • anton17 февраля 2014 в 14:02 #

        Если бы еще дополнили как предложил Денис в этом посте https://truemisha.ru/blog/vkontakte/top-button-advanced.html#comment-1828, то было бы замечательно. У себя сделал, работает отлично.

  • vasil15 февраля 2014 в 18:02 #

    скажите пожалуйста как и где в коде button_down.js прописать пути к своим изображениям кнопки

  • vasil15 февраля 2014 в 19:02 #

    и еще где выставляется скорость прокрутки?

    • Миша16 февраля 2014 в 21:02 #

      скорость прокрутки устанавливается в этой строчке:

      $("body,html").animate({scrollTop: 0},500);

      Она в самом конце файла. 500 - это и есть скорость прокрутки.

  • Женя26 марта 2014 в 00:03 #

    Миша, спасибо огромное, СУПЕР штука, давно искал.
    Также спасибо Денису за его доработку(воспользовался)

  • Violent16 июня 2014 в 19:06 #

    Когда ожидается обновление плагина со всеми заявленными ранние улучшениями, а может даже больше?) Был бы Вам очень признателен и благодарен! Думаю не я один=)
    Спасибо!)

    • Violent16 июня 2014 в 19:06 #

      Да, и почему бы Вам не выложить свою работу на http://wordpress.org/, думаю, многим было бы полезно и проще в поиске, а так же можно было бы отследить самые последние обновления ;)

      • Миша16 июня 2014 в 19:06 #

        Та да, через wordpress.org удобнее было бы обновлять, а то у меня какие-то косяки со скриптом внутреннего обновления.

        Пока не знаю, когда займусь этим плагином. Я по GA смотрю, какие посты самые популярные и ими обычно капитально занимаюсь :)

      • Миша16 июня 2014 в 19:06 #

        Я бы хоть сейчас занялся, но со временем постоянные траблы :)

        • Violent16 июня 2014 в 21:06 #

          Тогда оповестите, пожалуйста, как выпустите обновление, или зальете на WP, так будет легче мониторить и обновлять через консоль :) Хотелось бы, чтобы функционал был как ВК (а может даже больше:)) и размер поля подстраивался под экран устройства или вовсе убирался (ну и чтоб вверх, вниз, назад также присутствовали=)) . Надеюсь, у Вас найдется на это время и у Вас всё получится!
          С нетерпением буду(ем) ждать,
          Спасибо!

    • Женя16 июня 2014 в 20:06 #

      Да, тоже жду обновления :)

  • Павел12 сентября 2014 в 09:09 #

    Так и не нашёл, а где взять стрелку, или как её добавить?

  • Павел12 сентября 2014 в 17:09 #

    Спасибо, но там вроде как должны быть картинка, по скольку символ меняет своё направление - вверх и вниз.

  • Павел15 сентября 2014 в 18:09 #

    Но в каком конкретно месте, я пробовал, но картинка не появляется)

  • Павел16 сентября 2014 в 16:09 #

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

  • Павел16 сентября 2014 в 16:09 #

    Разобрался! Скопировал код не из архива а из демо в браузере, и всё заработало)

  • Павел16 сентября 2014 в 17:09 #

    Ещё бы сделать так, чтобы полоса исчезала, когда прокрутил наверх, и больше некуда опускать. А то надпись вниз есть, а вниз уже не опускается всё равно.

  • Павел16 сентября 2014 в 17:09 #

    И это я тоже нашёл, чуть выше пост Дениса. Спасибо! Пришлось правда чутка исправить) Справился, всё работает, стрелки есть, и полоса проподает при ручной прокрутке вверх.

  • Павел16 сентября 2014 в 17:09 #

    Вот полностью работающий код. Обратите внимание на ID основного блока с контентом на 3-й строчке кода, у меня это #content, а у вас может быть что-нибудь другое, например #wrapper или #container.

    ;(function($){var h=$.scrollTo=function(a,b,c){$(window).scrollTo(a,b,c)};h.defaults={axis:'xy',duration:parseFloat($.fn.jquery)>=1.3?0:1,limit:true};h.window=function(a){return $(window)._scrollable()};$.fn._scrollable=function(){return this.map(function(){var a=this,isWin=!a.nodeName||$.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!isWin)return a;var b=(a.contentWindow||a).document||a.ownerDocument||a;return/webkit/i.test(navigator.userAgent)||b.compatMode=='BackCompat'?b.body:b.documentElement})};$.fn.scrollTo=function(e,f,g){if(typeof f=='object'){g=f;f=0}if(typeof g=='function')g={onAfter:g};if(e=='max')e=9e9;g=$.extend({},h.defaults,g);f=f||g.duration;g.queue=g.queue&amp;&amp;g.axis.length>1;if(g.queue)f/=2;g.offset=both(g.offset);g.over=both(g.over);return this._scrollable().each(function(){if(e==null)return;var d=this,$elem=$(d),targ=e,toff,attr={},win=$elem.is('html,body');switch(typeof targ){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(targ)){targ=both(targ);break}targ=$(targ,this);if(!targ.length)return;case'object':if(targ.is||targ.style)toff=(targ=$(targ)).offset()}$.each(g.axis.split(''),function(i,a){var b=a=='x'?'Left':'Top',pos=b.toLowerCase(),key='scroll'+b,old=d[key],max=h.max(d,a);if(toff){attr[key]=toff[pos]+(win?0:old-$elem.offset()[pos]);if(g.margin){attr[key]-=parseInt(targ.css('margin'+b))||0;attr[key]-=parseInt(targ.css('border'+b+'Width'))||0}attr[key]+=g.offset[pos]||0;if(g.over[pos])attr[key]+=targ[a=='x'?'width':'height']()*g.over[pos]}else{var c=targ[pos];attr[key]=c.slice&amp;&amp;c.slice(-1)=='%'?parseFloat(c)/100*max:c}if(g.limit&amp;&amp;/^\d+$/.test(attr[key]))attr[key]=attr[key]&lt;=0?0:Math.min(attr[key],max);if(!i&amp;&amp;g.queue){if(old!=attr[key])animate(g.onAfterFirst);delete attr[key]}});animate(g.onAfter);function animate(a){$elem.animate(attr,f,g.easing,a&amp;&amp;function(){a.call(this,e,g)})}}).end()};h.max=function(a,b){var c=b=='x'?'Width':'Height',scroll='scroll'+c;if(!$(a).is('html,body'))return a[scroll]-$(a)[c.toLowerCase()]();var d='client'+c,html=a.ownerDocument.documentElement,body=a.ownerDocument.body;return Math.max(html[scroll],body[scroll])-Math.min(html[d],body[d])};function both(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery);
     
    jQuery.extend(jQuery.fn, {
     toplinkwidth: function(){
     totalContentWidth = jQuery('#content').outerWidth(); // ширина блока с контентом, включая padding
     totalTopLinkWidth = jQuery('#top-link').children('a').outerWidth(true); // ширина самой кнопки наверх, включая padding и margin
     h = jQuery(window).width()/10-totalContentWidth/10-totalTopLinkWidth;
     if(h= 1){
     jQuery(this).show();
     }
     jQuery(this).css({'padding-right': h+'px'});
     return true;
     }
     }
    });
     
    jQuery(function($){
     var topLink = $('#top-link');
     var top_true = false; // !!!
     topLink.css({'padding-bottom': $(window).height()});
     // если вам не нужно, чтобы кнопка подстраивалась под ширину экрана - удалите следующие четыре строчки в коде
     
    $(window).scroll(function() { 
     if($(window).scrollTop() >= 1) {
     topLink.fadeIn(300).children('a').html('Наверх').parent().removeClass('bottom_button').addClass('top_button');
     } else { 
     if(top_true)
     { 
     topLink.children('a').html('Вниз').parent().removeClass('top_button').addClass('bottom_button');
     }
     else
     { // !!! 
     topLink.children('a').html('Вниз').parent().hide(); // Если человек прокрутил к верху сам, то прячем блок
     }
     }
     });
     topLink.click(function(e) { 
     if($(this).hasClass('bottom_button')){
     // при нажатии на кнопку «Вниз» переходим туда, где прекратили чтение
     $("body").scrollTo( pos + 'px', 500 );
     top_true = false; // !!!
     } else{
     // определяем и запоминаем координаты того места страницы, откуда был совершен переход наверх
     pos = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
     top_true = true; // !!!
     $("body,html").animate({scrollTop: 0},500);
     }
     return false;
     });
    });
    • Максим27 сентября 2014 в 23:09 #

      Во-первых Ваш код с ходу не работает из-за html тегов (& <).
      Во-вторых Вы вырезали подгонку по ширине.
      В-третьих у Вас какой-то бред написан:

      h = jQuery(window).width()/10-totalContentWidth/10-totalTopLinkWidth;
      if(h= 1){
      jQuery(this).show();
      }
      jQuery(this).css({'padding-right': h+'px'});
      return true;
      }

      В-четвертых у автора (Михаила) есть в начальном примере ресайз, но проблема в том, что он не работает, если зум слишком большой (или адаптивная верстка):
      http://i66.fastpic.ru/big/2014/0927/9a/33e67d7117be2defdbba9bcf4182ca9a.png
      Система изначально выполняет функцию hide(), однако при первом же скроле все появляется заново.

  • vasil29 сентября 2014 в 22:09 #

    как сделать чтобы код работал на плантшете, кнопка отображается, а при нажатии ничего не происходит

    • Миша30 сентября 2014 в 09:09 #

      Доброго времени суток :)
      попробуйте в CSS кнопки увеличить параметр z-index, например z-index:9500.

  • vasil30 сентября 2014 в 19:09 #

    спасибо

  • Павел30 сентября 2014 в 21:09 #

    Миша, а можешь выложить полностью правильно работающий код? Я не профессионал, и подгонял код методом тыка, пока всё не заработало более менее так, как должно. Но да, полоса у меня налезает на текст, если не поменять значение в h = jQuery(window).width()/2-totalContentWidth/2-totalTopLinkWidth; на h = jQuery(window).width()/10-totalContentWidth/10-totalTopLinkWidth;

  • Павел2 октября 2014 в 00:10 #

    Вроде более менее, но у меня нет(

  • Павел2 октября 2014 в 13:10 #

    Не работает подгонка по ширине. В сообщении выше, я описал проблему. Почему приходится ставить цифру 10?

    • Миша3 октября 2014 в 09:10 #

      В архиве не работает подгонка по ширине (нужно будет мне обновить), а в демо вроде бы всё окей.

  • Генадий5 ноября 2014 в 17:11 #

    Миша, кнопка "Наверх и вниз" работает хорошо, но не получается изменить скорость прокрутки. Хочу сделать более резкую, можешь посмотреть что не так?
    Меняю значение 500, но толку нет, скорость остается прежней.

    $("body,html").animate({scrollTop: 0},500);
    • Генадий5 ноября 2014 в 19:11 #

      Все ОК, извиняюсь за ложную тревогу. Похоже, что браузер заглючил и не обновлял результаты изменений или что-то вроде этого.

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

      Это нужно для того, чтобы скорость прокрутки всегда была одинаковая. Сейчас же, выставляя определенное значение в МС, мы получаем разную скорость прокрутки, если прошли 2000 пикселей (изображение будет двигаться быстрей, т.к. нужно пройти большее расстояние за N МС) или 500 пикселей (медленней, т.к. расстояние будет меньше).

      Такое наверняка реализуется и, вероятно, тебе это по силам. Но есть-ли время и желание? :)

      • Миша6 ноября 2014 в 06:11 #

        Могу подсказать, что положение прокрутки страницы можно определить так:

        var scrollTop = $(window).scrollTop();

        А дальше простая математика :)

  • Михаил17 ноября 2014 в 19:11 #

    Здравствуйте, прежде всего спасибо за вашу статью и реализацию. Я сделал полосу прокрутки слева на своем форуме, вместо надписей вставил изображение стрелок, но возникла проблема следующего характера:
    Если я уменьшаю окно браузера до момента когда появляются горизонтальные полосы прокрутки, то когда я нажимаю на кнопку "вниз" страница прокручивается корректно, но смещается вправо по горизонтали, что довольно неудобно. Я не силен в программировании поэтому прошу подсказать что нужно изменить в скрипте что-бы страница прокручивалась ровно в том горизонтальном положении в котором захочет пользователь. Надеюсь что объяснил понятно

    • Миша17 ноября 2014 в 20:11 #

      Здравствуйте!
      По идее к моменту появления горизонтальных полос прокрутки кнопка должна пропадать - вы отключили эту часть кода?

      • Михаил17 ноября 2014 в 20:11 #

        Да, извиняюсь, забыл об этом написать. Я просто под стиль своей страницы подгонял и ориентировался на полосу прокрутки как на pikabu, а там она не пропадает при уменьшении размеров окна.

        Не очень хотелось-бы убирать кнопку прокрутки так как в дальнейшем хочу разместить в ней кнопки меню для сайта.

        • Михаил17 ноября 2014 в 21:11 #

          Что-бы не быть голословным укажу что именно я менял:
          В коде самой кнопки я добавил класс:

          <div class="go-up" id="top-link">
          	<a href="#top">наверх</a>
          </div>

          В CSS, я сделал следующее:

          .a, #top-link{
          text-align:center;
          color:#8FC9FC;
          }
          .go-up{
           display:none;
           z-index:3;
           position: fixed; /*позиционирование*/
           left: 0px;
           cursor: pointer;
           background: #8FC9FC;
           filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
           -khtml-opacity: 0.5;
           -moz-opacity:0.5;
           opacity: 0.5;
           width: 30px;
           height: 100%;
           padding: 0px;
           top: 0px;
           }
          .go-up:hover {
          filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
           -khtml-opacity:0.8;
           -moz-opacity:0.8;
            opacity: 0.8;
          }

          В коде самого скрипта ничего не менял, но так как изменил CSS, то на сколько я понимаю пропала и функция удаления кнопки "Вверх/вниз" при появлении горизонтальной полосы прокрутки.

          Теперь вроде как описал все.

          • Миша18 ноября 2014 в 09:11 #

            Нужно смотреть и разбираться конечно, сходу могу порекоммендовать попробовать убрать вот это:

            .go-up{
            left: 0px;
            }
            • Михаил18 ноября 2014 в 19:11 #

              Убрал эту строку и кнопка прокрутки сместилась на контент, но как прокрутка смещала в правый угол так и смещает. Так что вернул все обратно.

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

            • Михаил19 ноября 2014 в 21:11 #

              Решил проблему отключив горизонтальные полосы прокрутки (вроде как называются скролами).

              Добавил в CSS вот такую строчку:

              overflow-x:hidden;
  • Женёк27 ноября 2014 в 16:11 #

    Спасибо за кнопку! А как сделать, чтобы кнопка вверх появлялась/исчезала после прокручивания страницы на 400px ? А то не силен я в JS.

  • Salim12 декабря 2014 в 09:12 #

    Зачем писать столько строк для решения такой задачи, сделать функционал вверх и вниз( где была последняя позиция ) можно сделать например таким оброзом

             //Объявления глобальных переменных
             window.countScroll = 0, scrollPosition = 0;
             /*Это событие когда крутится именно колесо мышки (в разных браузерах это событие по       разному поэтому я прописал два события)*/
    	$("body").bind('mousewheel DOMMouseScroll', function(e) { if(countScroll == 1) countScroll = 0; });
     
            //При нажатии на кнопку (вызываем функция)
    	$('.up').click(function(event){ scrollUpD (event.target); });
    	//Сама функция
    	function scrollUpD (elementTarget) {
    		countScroll++;
    		if(countScroll == 1) {
    			scrollPosition = eWindow.scrollTop();
    			eWindow.scrollTop(0);  }
     
    		if(countScroll == 2) {
    			eWindow.scrollTop(scrollPosition);
    			countScroll = 0;}
    	}
  • Витаха3 января 2015 в 13:01 #

    Жаль что такие вот разработчики забывают что иногда сайты и юзеры делают, которым бы поэтапно расписать, что называется для русского ваньки, что и куда вставлять....пол часа потратил вхолостую, кнопка так и не зажглась - пошел искать более доступную для себя инструкцию

  • Мурад Саркаров26 октября 2015 в 23:10 #

    Спасибо. Единственно, считаю, не стоит слеплять scrollTo со своими ".js" в один файл. Мне такой подход не нравится, у себя разделил.

Оставить комментарий / вопрос

phpjsHTMLCSSSQLПросто код
  Для того, чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или авторизуйтесь на сайте.
Получайте новости блога по email или следите за мной в социальных сетях.
  • Миша: Добрый день! В принципе вам только немного нужно доработать код из этого поста - категории уже есть, цена - это и так...

  • eveniy: Добрый день Михаил, подскажите на примере как добавить свои произвольные поля в в вашу форму фильтрации: Я так понимаю...

  • Миша: Отлично! )

  • Дмитрий: сам разобрался: в настройках кастомного типа записи недавно оптимизировал настройки и переоптимизировал: в аргументе 'ta...

  • Дмитрий: У меня по какой-то причине пропало отображение (как в колонке меню слева, так и метабокс в записях ) раздела рубрик для...