Добрый день!
Ситуация:
Есть готовая страница index.html с несколькими тегами
<section>. Для каждого тега
<section> задан свой id.
К странице подключена библиотека jQuery. Есть меню с ссылками с классом "anchor", по нажатию на которые осуществляется плавный переход к выбранному блоку
<section>.
Код такой:
$('.anchor').on('click', function(e) {
e.preventDefault();
var section = $(this).attr('href').substr($(this).attr('href').indexOf('#'));
var $section = $(section);
$('html, body').animate({
scrollTop: $section.offset().top + 'px'
}, 1000);
});
Все работает. При этом в адресной строке НЕ добавляется якорь, на который ссылается ссылка.
Задача, которую пытаюсь реализовать, но пока не получается:
Нужно в исходную страницу index.html внедрить еще страницу sub.html через тег
<iframe>.
Во внедренной странице sub.html есть
<div>, по нажатию на который должна осуществляться плавная прокрутка на
<section id="contacts"> страницы index.html и при этом не должен добавляться якорь в адресную строку.
Пробую сделать так:
В sub.html подключаю jQuery и делаю
<div class="anchor">. Ниже пишу скрипт:
$('.anchor').on('click', function (e) {
e.preventDefault();
var section = parent.window.location.hash = "#contacts";
var $section = $(section);
$('html, body').animate({
scrollTop: $section.offset().top + 'px'
}, 1000);
return false;
});
Код работает не так как хочется. Прокрутка происходит, НО:
1. Резкая, не плавная.
2. Якорь #contacts добавляется в адресную строку.
Где-то прочитал, что если добавить строку return false, то в адресной строке не будет добавления якоря. Но это не сработало.
Прошу помочь в реализации поставленной задачи.
Спасибо!
Простой