Элементы прокрутки страницы с одной страницей не работают на разных страницах

Question

Я создал тему Wordpress, которая поддерживает как макет страницы, так и отдельные страницы (т. Е. Страницы, которые перемещаются от первой страницы). Как и в большинстве макетов страниц, вы нажимаете на элемент навигации и прокручиваете этот раздел. Я достиг этого, предоставив разделу id и затем поместив его в ссылку меню (т. Е. #about или #contact).

Этого код прокручивается секция страницы:

jQuery(document).ready(function($){ 
jQuery('a[href*=#]').click(function (e) { 
    e.preventDefault(); 

    var navHeight = jQuery('#header').height(); 
    var id = jQuery(this).attr('href'); 
    var scrollTo = jQuery(id).offset().top-navHeight; 

    jQuery('html,body').animate({ 
     'scrollTop': scrollTo 
    }, 500); 
}); 

}); 

Проблема у меня, когда я уйду с этой страницы, а затем нажмите на пункте меню, который обычно будет прокрутить страницу вниз - пункты меню не работают.

Я попытался использовать полный URL-адрес, а также использовать «/ # id», но ни один из этих параметров не работает. Есть ли способ обхода, который я могу использовать здесь?

Answer 1

Может быть, вы можете попробовать следующий код

jQuery(document).ready(function($){ 

    // The nav height can be set here if it will be always the same 
    var navHeight = jQuery('#header').height(); 

    // Check if we have a hash (when we come back on the home) 
    if(window.location.hash !== "") { 

     var scrollTo = jQuery(window.location.hash).offset().top-navHeight; 

     jQuery('html,body').animate({ 
      'scrollTop': scrollTo 
     }, 500); 

    }// if 

    // Use your previous code if we're on the home page (thanks WP body_class()) 
    jQuery('.home #nav a[href*=#]').click(function (e) { 
     e.preventDefault(); 

     var id = jQuery(this).attr('href'); 
     var scrollTo = jQuery(id).offset().top-navHeight; 

     jQuery('html,body').animate({ 
      'scrollTop': scrollTo 
     }, 500); 
    }); 

}); 

Может содержать некоторые ошибки, или вы, возможно, потребуется сделать некоторые незначительные изменения, но общая идея здесь.

Главное изменение заключается в том, что мы просто проверяем, есть ли хэш в текущем URL-адресе, и если это так, мы прокручиваем элемент.

Вам необходимо изменить ссылки своего меню с абсолютным URL (или на /index.php#lorem), так как ваши ссылки уже таможни, они не должны сильно влиять на вас.

Надеется, что это может поможет вам

Помните, что я не проверял этот код, так что вы можете столкнуться с некоторыми вопросами.

Answer 2

Здесь была работа, вокруг которой я закончил использовать. Проблема заключалась в том, что код, который я использовал, использовал атрибут «href» в качестве идентификатора для раздела, который он должен прокручивать, это создает две проблемы:

1) Когда вы переходите на другую страницу, если ваш URL-адрес это просто «#sectionID», тогда он не будет работать на новой странице (если нет раздела с этим идентификатором, но вы, вероятно, не хотите, чтобы меню прокручивалось там, даже если есть)

2) Если вы пытаетесь использовать полный URL-адрес (то есть http://yourwebsite.com/#sectionID), тогда код jquery не может использовать это как идентификатор раздела, в который он должен перейти.

Решение было довольно простым - получите код, чтобы посмотреть на другой атрибут, чтобы получить идентификатор раздела - в этом случае я использовал атрибут rel, который встроен в опции меню wordpress.

Новый код выглядит следующим образом:

jQuery(document).ready(function($){ 
jQuery('a[href*=#]').click(function (e) { 
    e.preventDefault(); 

    var navHeight = jQuery('#header').height(); 
    var id = jQuery(this).attr('rel'); 
    var scrollTo = jQuery('#' + id).offset().top-navHeight; 

    jQuery('html,body').animate({ 
     'scrollTop': scrollTo 
    }, 500); 
}); 

}); 

Теперь в опции меню я использую «/ # sectionID» в качестве ссылки и «sectionID» как отношения связи.

Работает как очарование.