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 Интересная подборка рекламных конфузов (фото)

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

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

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

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

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

24.11.2013 Рассылки битрикс или замена unisender

Многие компании, которые работают с клиентам на прямую пользуются различными сервисами рассылок, примером такого сервиса может служить Unisender. В среднем за частое пользование системой сумма оплаты составляет около 3-4 тысяч рублей в месяц (экспертное значение, вычисленное на основе опыта компании).

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

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