it@jump-studio.net

Статьи


Плавная прокрутка к блоку (якорь) и подсветка блока при помощи 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>
Чтобы использовать якорь создайте:
  1. Ссылку <a href="#id1">Ссылка 1</a> (где #id1 - идентификатор блока)
  2. Создайте нужный блок или присвойте блоку идентификатор, в примере это 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, плавная прокрутка
   
Возможно вам будут интересны:

23.03.2014 Готовое решение: Портал по продаже недвижимости

Рады предложить Вашему вниманию готовое решение для портала/сайта по продаже недвижимости. Преимущества готового решения в следующем..

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

09.12.2013 Повышение цен на лицензии битрикса

Вынуждены сообщить Вам о грядущем увеличении стоимости лицензий битрикс. Ниже мы приводим цены, которые сообщает 1С своим партнерам..

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

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

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

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

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