Нужна помощь по якорным ссылкам на странице с динамической высотой?

Question

[Apxu]

Добрый день,
попытаюсь максимально понятно и доступно объяснить всю суть моей проблемы.
Есть страница и ее начальная высота с прокруткой 5500px(узнавал высоту с прокруткой с помощью document.documentelement.scrollheight). Примерно через 1500px прокрутки вниз, на странице начинается анимация(несколько блоков начинают двигаться по экрану и красиво исчезают), процесс которой регулируется прокручиванием страницы(т.е. прокручиваешь вниз, они исчезают, прокручиваешь вверх они появляются и становятся на свои начальные места). После того как анимация завершилась, то высота страницы уже 6300px. Тут и начинается проблема: мои якорные ссылки не переносят на нужное место, т.е. вот на эти 800px на которые увеличилась высота моей страницы они и не доходят до своей цели.
Сейчас эта проблема решена с помощью функции javascript, которая делает 2й клик по ссылке после того как анимация уже отработала и экран остановился в 800х пикселях от цели. В итоге это выглядит не совсем хорошо, т.к. визуально это все происходит в 2 этапа.
Надеюсь, что понятно объяснил. Заранее благодарен.

Answer 1

[Виталий Киренков]

"мои якорные ссылки не переносят на нужное место," - вот тут как то непонятно... что за якорные ссылки? как они выглядят? как должны? где должны быть?

Answer 2

[Apxu]

есть меню и на одном из пунктов которого задан ссылке атрибут a href="#test".../a и есть div id="test". . . /div который находится почти в конце страницы. При нажатии на этот пункт меню должно переносить к этому диву.

Answer 3

[Дмитрий Ермолаев]

без разницы меняется высота или нет - якорь всегда приводит куда надо.

видимо у вас ошибка в коде, покажите свой код.

вот пример с якорями как надо делать codepen.io/iusfof/pen/KehCf?editors=110

Comments

[Apxu]

next.uamaster.com вот сайт, в меню пункты "кто мы?" и "важное", только нужно переход делать до того как высота увеличится изза анимации... создавали его еще давно до меня, хз что может в скипте на это влиять, но когда анимацию отключаешь то все работает на "ура".

[Дмитрий Ермолаев]

@Apxu какой из .js файлов отвечает за перемещение по якорям?

[Apxu]

custom.js

[Apxu]

В некоторых случаях там там можно перейти. Я вот сейчас пробую написать функцию одну, которая походу исправит баг этот. В custom.js есть такая переменная var controller = $.superscrollorama(); благодаря которой и работает эта анимация, как я понял..так вот если ей задать var controller = false; то анимация перестает работать и якоря работают отлично. Я написал такую функцию

var myF = document.documentElement.scrollHeight;

function foo(){
if(myF < 6000){
return controller = false;
setTimeout(function(){
return controller = $.superscrollorama();
}, 1500);
});
var myF - определяет высоту сайта всего с прокруткой и если высота меньше 6000 пикселей задает переменной false и включает таймер на возврат работоспособности анимации. возвращая переменной значение $.superscrollorama();
т.е. отключает анимацию и переход происходит нормально, а потом просто возвращает все на свои места.
И поставил пункту меню onclick="foo()"
Но что-то не так...не хочет переписывать значение переменной, может что-то с областью видимости или в чем-то другом проблема...хз :|

[Дмитрий Ермолаев]

@Apxu переделал, работает нормально, если я все правильно понял.
попробуйте те исправления, что я написал сделать в своих файлах
https://www.dropbox.com/s/qkxau2mmxh8p3kv/UaMaster...
в архиве readme.txt - там все исправления

[Дмитрий Ермолаев]

@Apxu правда у меня при сохранении через фаерфокс не работают всякие анимации на странице, так что могут быть сюрпризы, но по идее должно нормально работать

[Apxu]

анимация перестает работать, я так уже тоже пробовал :(

[Дмитрий Ермолаев]

@Apxu а можете мне исходник скинуть? мне прям интересно. лучше в ВК, профиль указан в контактах