Статьи

Плавная прокрутка к блоку (якорь) и подсветка блока при помощи JS

Размещено: 09.02.2017 12:29

Для начала добавим стили затемняющего фона и стиль блока с отступами и увеличением z-index:

#layer {
position: absolute;
display: none;
top:0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.85);
z-index: 5;
}
.pobw {
position: relative;
background: #FFF;
z-index: 10;
padding: 20px;
}

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

<script type="text/javascript">

var divs = jQuery('.pobw'),
layer = jQuery('#layer');
jQuery(document).ready(function(){
jQuery('a[href^="#"]').bind('click.smoothscroll',function(e) {
e.preventDefault();
var target = this.hash,
$target = jQuery(target);
jQuery('html, body').stop().animate({
'scrollTop': $target.offset().top - 100
}, 900, 'swing', function () {
window.location.hash = target;
// alert(target);
jQuery(target).addClass("pobw");
jQuery('#layer').css('position', 'fixed');
layer.fadeIn('fast');
});
layer.click(function(){
jQuery(target).removeClass("pobw");
jQuery(this).fadeOut('fast');
});
});
});

</script>

В удобном месте подключите блок "затемнения" фона, можно ближе к подвалу.

<div id="layer"></div>

Чтобы использовать якорь создайте:

Ссылку <a href="#id1">Ссылка 1</a> (где #id1 - идентификатор блока)
Создайте нужный блок или присвойте блоку идентификатор, в примере это id1:

<div id="id1">
Текст Текст Текст Текст
</div>

Все должно работать. Надеюсь помог вам облегчить жизнь! :-)

VERSION_2

Для облегчения подключения к данному плагину предлагаю готовые файлы, которые нужно подключить до тега </head> (между <head></head>)

<link href="//jump-studio.net/fadeout/fadeout_style.css" type="text/css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//jump-studio.net/fadeout/fadeout_layer.js"></script>

После подключения данных скриптов вам потребуется настроить якоря и установить перед тегом </body> код:

<div id="layer"></div>

comments powered by Disqus

Поделитесь с друзьями данной статьей:

Тема: Плавная прокрутка к блоку (якорь) и подсветка блока при помощи JS
Тэги: якорь, html, плавная прокрутка

Возможно вам будут интересны:

27.10.2014 Разработка группы в социальной сети вконтакте под ключ
Предлагаем вашему вниманию новую услугу компании Jump-Studio.net - разработка группы или паблика в социальной сети вконтакте под ключ.

28.11.2013 Как скрыть хлебные крошки с главной страницы сайта на 1С-Битрикс

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

24.10.2015 Как вывести свойство "привязка к элементу"
Для своих клиентов мы почти полностью отказались от стандартных компонентов битрикса, вроде компонента каталог, элемент каталога детально и т.д. в пользу API Битрикс. Чаще всего использование апи помогает избежать многих проблем, одна из которых - вывод названия свойства "привязка к элементу" без лишних ссылок, ID и т.д.

01.06.2014 Абонентское обслуживание сайтов

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

26.11.2013 Стоит ли заказывать сайт у компании, которая предлагает Вам разработку проекта на собственной CMS или HTML?

Работая с одной из туристических компании мы узнали о том, что их первый и основной сайт был разработан на CMS веб-студии "Zooma" (название изменено). Так как сайт был разработан в начале 2000ых годов и морально устарел была поставлена задача в его обновлении...

Возврат к списку

Голосов: 2, Оценка: 4.5 / 5

it@jump-studio.net

Статьи

Плавная прокрутка к блоку (якорь) и подсветка блока при помощи JS

VERSION_2

Поделитесь с друзьями данной статьей: