Главная » Полезные статьи » Язык JavaScript » Yii: Красивенький и чистенький JavaScript плавно прокручивает страницу до якоря и делает лёгкий откат
Распечатать статью

Yii: Красивенький и чистенький JavaScript плавно прокручивает страницу до якоря и делает лёгкий откат

Делаем плавное перемещение по странице до нужного якоря с выделением заголовка и лёгким отступом вверх для чувства контекста

В нужном файле вида вставляем

<a href="#user_articles">Статьи от пользователей</a>


Это может быть меню второго уровня или просто ссылка-якорь в основном тексте. Дальше в том месте куда делаем переход ставим якорь

<a name="user_articles"></a>
   <h3 id="user_articles">
      <span>Статьи от пользователей</span>
   </h3>

Указанный в заголовке id=»user_articles» используется для отыскивания вложенного в него span, у которого JavaScript создаст. А в CSS можно прописать для него стиль. Вот зачем это всё. Если нужен только плавный переход, то достаточно «голого» якоря.

Как хорошие мальчики, Javascript-функции будем сохранять в отдельный файл, например script.js

Вот всё его содержимое, которое и даёт нам чудный и привлекательный эффект:

$(function(){

	// По нажатию на якорную ссылку едем к якорю и потом оттягиваемся на 100px вверх
	$("a[href*=#]:not([href=#])").bind('click', function (event) {
    // Устанавливаем у span
		document.getElementById("user_articles").getElementsByTagName('span')[0].setAttribute("class", "active");

    var thisHash = this.hash;
    var targetOffset = $(thisHash).offset().top;
    $("html,body").stop().animate({
        scrollTop: targetOffset
    }, 1100 ).animate({
        scrollTop: targetOffset -100
    }, 1100 );
    location.hash = thisHash;
    event.preventDefault();
	});

});

Я выделил основополагающее для себя место — доступ к HTML-элементу <span>, который сидит внутри другого элемента <h3 id=»user_articles»>.

Другой интересный момент — последовательное использование jQuery функции .animate(), первый раз она прокручивает нас до нашего якоря, вторая .animate() откручивает на 100px вверх.

Получился миленький эффект плавной прокрутки. Тут задействована библиотека jQuery, но ничего страшного, ведь в Yii Framework она подключается по умолчанию.

А вот наш файл со скриптами script.js надо подключить. И делаем мы это в контроллере, в соответствующем методе добавляя 2 строчки:

$cs = Yii::app()->clientScript;
    $cs->registerScriptFile(Yii::app()->request->baseUrl.'/js/script.js');

Для общего развития так же можно добавлять js скрипты и css стили в файлы вида (views):

$cs = Yii::app()->clientScript; // Get client script
$cs->registerCSSFile(Yii::app()->request->baseUrl.'/css/lytebox.css'); // Add CSS
$cs->registerScriptFile(Yii::app()->request->baseUrl.'/js/lytebox.js'); // Add JS

Пока такой способ нас устраивает, но если будем много фишек делать на JavaScript, то правильнее будет сделать автоматическое подключение js файлов в Yii

Источник:  loco.ru

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

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

Похожие статьи