+7-499-70-300-44
заказать звонок
Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Спасибо за оставленную заявку
Ожидайте звонка

Подсветка активного пункта меню на одностраничных сайтах

CSS

JS


$('a[href^="#"]').click(function(event) {
var id = $(this).attr("href");
var target = $(id).offset().top;
$('html, body').animate({scrollTop:target}, 500);
event.preventDefault();
});

function getTargetTop(elem){
var id = elem.attr("href");
var offset = 50;
return $(id).offset().top - offset;
}


$(window).scroll(function(e){
isSelected($(window).scrollTop())
});

var sections = $('a[href^="#"]');

function isSelected(scrolledTo){
   
var threshold = 100;
var i;

for (i = 0; i < sections.length; i++) {
var section = $(sections[i]);
var target = getTargetTop(section);
   
if (scrolledTo > target - threshold && scrolledTo < target + threshold) {
sections.removeClass("active");
section.addClass("active");
}

};
}

HTML


<ul class="flexnav">
<li><a href="#home" onclick="scrollPageToId('home');">Home</a></li>
<li><a href="#what-we-do" onclick="scrollPageToId('what-we-do');">What we do</a></li>
<li><a href="#reviews" onclick="scrollPageToId('reviews');">Reviews</a></li>
</ul>


<section class="home" id="home">
<div class="container">
</div>
</div>

<section class="home" id="what-we-do">
<div class="container">
</div>
</div>

<section class="home" id="reviews">
<div class="container">
</div>
</div>

CSS

ul.flexnav li a.active {
    border-bottom: 1px solid #000;
}

Другие статьи

Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для обсуждения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

Введите адрес сайта, который нуждается в продвижении *

Указать точное время звонка

или позвоните нам по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Хочу так же
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей.

Введите ваше имя *

Введите контактный телефон *

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
[contact-form-7 404 "Not Found"]
Спасибо за оставленную заявку
Ожидайте звонка
Заказ СЕО продвижения
Введите ваше имя и телефон.
Я лично свяжусь с Вами для обсуждения деталей.

Введите ваше имя *

Введите контактный телефон *

Введите ваш Скайп *

Спасибо за оставленную заявку
Ожидайте звонка