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, плавная прокрутка
   
Возможно вам будут интересны:

02.12.2013 Интересная подборка рекламных конфузов (фото)

Предлагаем вашему вниманию подборку интересных рекламных решений и конфузов.

12.12.2013 Jump-Studio.net присвоен адрес в Яндексе. Ура!!!

Рады сообщить о том, что нашей компании присвоен адрес в Яндексе. Теперь нашим клиентам будет намного проще найти нас

02.09.2014 Преимущества разработки сайта компании

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

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

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

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

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