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 создаст 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

 

 

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

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.



Другие статьи по этой теме:
Комментарии (3)     Подпишитесь на RSS комментариев к этой статье.

3 комментариев

#326
Ваня говорит:
March 15, 2012 at 01:35 am
Не понял: куда вставлять последний код?
#328
almix говорит:
March 16, 2012 at 07:14 pm

У нас эффект плавной прокрутки на jQuery применяется на странице описания города, значит в контроллере ищем action, который отвечает за это - actionViewCity и в самое начало этого экшна вписываем:

public function actionViewCity(/*id*/)
{
$cs = Yii::app()->clientScript;
    $cs->registerScriptFile(Yii::app()->request->baseUrl.'/js/whytravel.js');


$city=$this->loadModel();

...
}

можно посмотреть демо на сайте ПочемуПутешествовать

#1548
Vetal говорит:
May 21, 2016 at 05:28 pm

Чтобы при переходах по ссылкам не "дергало", нужно добавить callback-функцию в последний animate и строку

location.hash = thisHash;

перенести в него.

Leave a Comment

Fields with * are required.

Картинка с кодом валидации
Пожалуйста введите символы с картинки. Регистр букв неважен.