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

Делаем плавную прокрутку контента наверх, HowToMake - Дизайн и разработка сайтов

Древность

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

<a href="#">Go 2 Top</a>

Шаг вперед

Но все-таки хочется плавной прокрутки, поэтому создадим файл htm-gtt.js откроем его программкой Notepad++ и вставим следующий код:

$(document).ready(function() { 

    $('a[href=#top]').click(function(){
        $('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });

});

Теперь Вам нужно подключить вызов этого скрипта в шапке документа

/*Подключаем библиотеку jQuery через Google API*/
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>

/*Подключаем наш скрипт*/
<script type="text/javascript" src="http://ваш-сайт.com.ua/ja/htm-gtt.js"></script>

Допустим Вы не хотите создавать отдельный файл, тогда можно просто подключить скрипт между тегами <head></head>

$(document).ready(function() { 

    $('a[href=#top]').click(function(){
        $('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });

});
</head>

Так скрипты подключены, теперь нужно в подвале сайта вывести нашу ссылочку:

<a href="#top" title="Go to Top">Go 2 Top</a>

Пример Вы можете увидеть на моем сайте в правом нижнем углу ссылка «Наверх».

Perfect

Эх все бы круто, но еще же хочется, чтобы ссылочка например появлялась в правом или левом нижнем углу, только тогда когда мы прокрутили колесико мышки хотя бы пикселей на 100.

Создадим абзац с нашей ссылкой «Наверх»

<p style="display: block;" id="go-to-top">
       <a href="#top">Go to top</a>
</p>

Зададим стилей нашей ссылке «Наверх»

/* go to top */
#go-to-top {
	position: fixed;
	bottom: 0;
	margin-left: -220px;
	width: 100px;
	text-align: right;
	clear: both;
}
#go-to-top a {
	color: #ada597;
	text-transform: uppercase;
	text-decoration: none;
	-webkit-transition: background-color .7s;
	-moz-transition: background-color .7s;
	-o-transition: background-color .7s;
	transition: background-color .7s;
}
#go-to-top a:hover {
	color: #615349;
}

Все таки jQuery радует (заменяем содержимое файла htm-gtt.js слудеющим кодом):

$(document).ready(function(){
/*Для начала скроем блок с нашей ссылкой*/
        $("#go-to-top").hide();
	$(function () {
		$(window).scroll(function () {
/*Отслеживаем событие мыши
и задаем условие, что если прокрутили контент
на 100px то блок с ссылочкой нужно отобразить*/
			if ($(this).scrollTop() > 100) {
				$('#go-to-top').fadeIn();
			} else {
				$('#go-to-top').fadeOut();
			}
		});
/*Ну и наше плавное перемещение вверх*/
	$('#go-to-top').click(function () {
	$('body,html').animate({scrollTop: 0}, 800);
	return false;
		});
	});
});

Мне очень нравится этот эффект, если у Вас что-то не получается задавайте вопросы в комментариях.

Добавить комментарий:


Комментарии
  1. JAH

    Да и кстати совсем забыл про такие волшебные кнопки на клавиатуре как «Home» и «End» — нажали «Home» и попали наверх страницы, нажали «End» — в подвал страницы

  2. Some Guy

    Я не люблю «приклеенные» элементы с position:fixed (с точки зрения пользователя), они отвлекают внимание при скроллинге. Да и кнопку home на клаве никто не отменял.

  3. Вадим

    WordPress 3.6 не работает, согласно непонятных косяков 3.6 и jQuery

    Во первых если посмотреть консоль хрома
    сайт выдает ошибку GET http://сайт.com/wp-includes/js/jquery/jquery-1.10.2.min.map 404 (Not Found)

    когда скачиваешь и кладешь этот файл
    другая ошибка говорит

    Uncaught TypeError: Property ‘$’ of object [object Object] is not a function сайт.com/:171
    (anonymous function) сайт.com/:171
    c jquery.js:7341
    p.fireWith jquery.js:7403
    b.extend.ready jquery.js:6875
    H

    Когда заменяешь код, так как он хочет, просто не работает:

    <!-- Плавная прокрутка к id #якорю -->
    
    jQuery(document).ready(function($) {
     
        $('a[href=#top]').click(function(){
            $('html, body').animate({scrollTop:0}, 'slow');
            return false;
        });
     
    });		
    
    <!-- Плавная прокрутка к id #якорю -->
    

    там на форуме вордпреса бурная дискуссия по поводу WP3.6 и jQuery
    но решения я так и не увидел

  4. JAH

    Вадим, не знаю че у Вас не работает, скорей всего ошибка в файле который получаете методом GET, а в целом сечас занимаюсь редизайном и у меня все работает:

    в файл functions.php:

    function htm_scripts(){
      wp_deregister_script( 'jquery' );
      wp_register_script( 'jquery', get_template_directory_uri() . 'js/jquery-1.8.2.min.js' );
      wp_enqueue_script( 'jquery' );
      wp_enqueue_script( 'include', get_template_directory_uri() . 'js/include.js', array(), '1.0', true );
    }
    add_action( 'wp_enqueue_scripts', 'htm_scripts' );

    а в файле include.js такие штуки:)

    (function($){
      
      $.fn.exists = function(){
        return $(this).length;
      }
    
      if($('#go_top').exists()) {
        $('#go_top').on('click',function(){
          $('body,html').animate({scrollTop: 0}, 800);
          return false;
        });
      }
    
    })(jQuery)

    #go_top — это id ссылки наверх

  5. den

    Почему нельзя выложить, уже готовый материал, как у ВАс на других статьях. Скачать. ???

  6. JAH

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

  7. Владимир

    Совершенно ничего не понял. Можно было бы и понятней описать этот процесс. Не все же программисты с опытом. Неуже ли нельзя описать процесс создания этой прокрутки: «создайте файл пшп, положите его в корень……»

  8. Ludozhka

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