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

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

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

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

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

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

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

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

$(function(){
	
	// По нажатию на якорную ссылку едем к якорю и потом оттягиваемся на 100px вверх
	$("a[href*=#]:not([href=#])").bind('click', function (event) {
    // Устанавливаем class="active" у 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