Статьи

Плавная прокрутка к блоку (якорь) и подсветка блока при помощи 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 - разработка группы или паблика в социальной сети вконтакте под ключ.

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

04.02.2014 Гениальная реклама Мерседес

Реклама курсовой устойчивости мерседес. Очень интересное исполнение

20.11.2013 Внедрение микроразметки в стандартный компонент хлебных крошек 1C-Битрикс

Внедрение микроразметки в стандартный компонент хлебных крошек/breadcrumb 1С-Битрикс.

09.11.2015 Открытие нового проекта Chel-Beauty.ru

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

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

it@jump-studio.net

Статьи

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

VERSION_2

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