Предотвращение перехода якоря при загрузке страницы

0

В настоящее время я использую "гладкую прокрутку" на моей странице Wordpress, и я пытаюсь, чтобы страница плавно прокручивалась до требуемого раздела при #portfolio из внешней ссылки (используя якоря (#portfolio) оттуда, я хочу, чтобы страница начала вверху и THEN прокрутите список до раздела портфолио.

То, что происходит, это кратковременное отображение "секции портфолио" (прыжок якоря), а THEN сбрасывается на верх и прокручивается вниз.

Код

$(function() {
    $('.menu li a').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
    if (target.length) {
        $root.animate({
        scrollTop: target.offset().top - 75
        }, 800, 'swing');
            return false;  
            }
        }
    });
});

загрузка страницы

$(window).on("load", function() {
if (location.hash) { // do the test straight away
    window.scrollTo(0, 0); // execute it straight away
    setTimeout(function() {
    window.scrollTo(0, 0); // run it a bit later also for browser compatibility
    }, 1);
}
var urlHash = window.location.href.split("#")[1];
if (urlHash && $('#' + urlHash).length)
    $('html,body').animate({
    scrollTop: $('#' + urlHash).offset().top - 75
    }, 800, 'swing');
});

Как предотвратить "прыжок", который, кажется, происходит при загрузке страницы?

Ссылки HTML-nav (с использованием фиктивных ссылок)

<a href="link.com/#portfolio>portfolio</a>

HTML-divs

<div id="portfolio></div>
  • 0
    установленное время ожидания заставляет его прыгать на вершину после запуска другого кода ...
  • 3
    Проблема в том, что link.com/#portfolio имеет значение для браузера - откройте в этом месте. Вы не можете изменить браузер, поэтому он запускается в этом месте, а затем запускает ваш Jovascript.
Показать ещё 3 комментария
Теги:

1 ответ

0
Лучший ответ

Вы можете обойти поведение браузера, изменив привязку, чтобы он содержал дополнительный текст, который будет уникальным для посещения страницы. В приведенном ниже примере я добавил первые шесть строк к вашей функции, чтобы установить переменную AnchorSeed, а затем я использовал эту переменную, где вы назначаете переменную urlHash:

$(window).on("load", function() {
    var AnchorSeed = new Date() * 1;
    $( ".AnchorUpdate" ).each(
        function() {
            $( this ).attr( "id", this.id + AnchorSeed );
        }
    );
    if (location.hash) { // do the test straight away
        window.scrollTo(0, 0); // execute it straight away
        setTimeout(function() {
            window.scrollTo(0, 0); // run it a bit later also for browser compatibility
        }, 1);
    }
    var urlHash = window.location.href.split("#")[1] + AnchorSeed;
    if (urlHash && $('#' + urlHash).length)
        $('html,body').animate({
        scrollTop: $('#' + urlHash).offset().top - 75
        }, 800, 'swing');
});

И вам нужно добавить класс AnchorUpdate к любому элементу страницы, к которому вы могли бы перейти, чтобы подпрограмма jQuery могла найти его и обновить свой идентификатор с помощью значения AnchorSeed. В этом случае мы знаем, что "портфолио" является такой ссылкой, поэтому оно будет изменено как:

<div class="AnchorUpdate" id="portfolio></div>

Эффект от этого заключается в том, что идентификатор изменится с "портфолио" на что-то вроде "portfolio1382124849780" (в зависимости, конечно, от отметки времени при загрузке страницы).

Поскольку идентификатор "портфолио" не будет существовать, когда страница заканчивает загрузку (даже если она является частью исходного HTML), browswer не должен подпрыгивать.

Я использовал JavaScript полностью, потому что я не знал, был ли у вас доступ к серверным переменным. Если вы это сделаете, я думаю, что они могут быть предпочтительным решением, так как код будет более читабельным. Вы можете использовать переменную счетчика страниц или просто временную метку на стороне сервера, если это возможно.

Редактировать:

В комментариях вы упомянули, что это работало для внешних ссылок, но что оно нарушило внутренние ссылки. У меня нет времени, чтобы настроить тест прямо сейчас, но я думаю, что это будет работать, чтобы добавить подпрограмму jQuery для обновления этих внутренних ссылок, похожих на то, что делается выше. Например, ваша внутренняя ссылка:

<a href="#InternalLink">Jump to Internal Link</a>

Вы можете дать ему другой класс, указывающий, что он нуждается в обновлении:

<a class="InternalLinkUpdate" href="#InternalLink">Jump to Internal Link</a>

И затем вызвать аналогичную модификацию этого класса с помощью jQuery:

$( ".InternalLinkUpdate" ).each(
    function() {
        $( this ).attr( "href", $( this ).attr( "href" ) + AnchorSeed );
    }
);

(Так как я не могу скопировать из рабочего кода на данный момент, я мог бы сделать ошибку пунктуации или такой, как указано выше, но он не должен слишком много переделывать, чтобы заставить его работать правильно.

  • 0
    Привет, Джо, спасибо за твой ответ. Попробую и доложу!
  • 0
    Привет Джо, это не похоже на работу. По сути это нарушает функциональность прокрутки при переходе с другой страницы. Это все еще работает на домашней странице, хотя. Я вижу, что вы пытаетесь сделать, хотя я возьму это, чтобы посмотреть, смогу ли я заставить его работать. Спасибо за вашу помощь!
Показать ещё 13 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню