Статьи

Плавная прокрутка к блоку (якорь) и подсветка блока при помощи 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, плавная прокрутка

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

02.11.2015 BootStrap и 1С-Битрикс
Компания Jump-Studio приняла решение об использовании на новых сайтах клиентов фрэймворка BootStrap. Хотите спросить почему? Мы ответим!

17.05.2016 Увеличиваем количество клиентов с сайта. Обзор сервиса удержания клиентов с сайта
Сегодня я хочу с вами поделиться очень-очень-очень крутым сервисом, который поможет увеличить продажи с вашего сайта! Это проверено на очень крупном проекте с посещаемостью около 1500-1700 человек и количеством заявок с него, стремящимся к нулю!

27.11.2013 Секрет продвижения услуг в интернете

Сегодня я бы хотел поговорить о продвижении услуг в интернете. Наиболее современным способом продажи определенной услуги является разработка Лендингов или Landing Page. Интернет все больше и больше наполняется таким типом сайтов, так как их разработка занимает мало времени, а стоимость в разы ниже обычного сайта.

06.10.2015 Анонс нового проекта. Улицы Челябинска CSV
На данный момент мы почти заканчиваем свой проект каталог салонов красоты. Благодаря нашему проекту тысячи девушек без труда смогут найти лучшие салоны города, руководствуясь народным рейтингом и отзывами.

21.11.2013 Редакция 1С-Бирикс Управление сайтом - первый сайт

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

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

(Нет голосов)

it@jump-studio.net

Статьи

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

VERSION_2

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