При нажатии перенаправить на новую страницу и перейти к определенному разделу на этой новой странице.

Question

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

Проблема:

Вот какВ настоящее время я перенаправляю

 <div class="button know-more-btn">  
    <a href="/about-us#Who-We-Are" target="" class="btn-link btn-small">
    KNOW MORE</a>
    </div>

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

Я сейчас пытаюсьчтобы реализовать этот сценарий с помощью приведенного ниже кода: -

$('.know-more-btn').click(function () {
   if(location.hash == "#Who-We-Are"){
    $('html, body').animate({
    scrollTop: $(".map-section").offset().top
}, 1000);
}
});

Итак, по щелчку кнопки Know-More-Btn, он должен проверить location.hash и прокрутить класс div раздела карты на новой странице..

Но он только перенаправляет и не прокручивает до нужного раздела.

Пожалуйста, помогите мне решить эту проблему.

Answer 1

Для этого вам не нужен jQuery, на каждом HTMLElement есть встроенный метод, называемый scrollIntoView

. Добавьте следующий скрипт на страницу о нас:

const map = document.querySelector('#Who-We-Are .map-section')

// simulates arriving at #Who-We-Are for the purpose of this example
window.location.hash = 'Who-We-Are';

addEventListener('DOMContentLoaded', event => {
  if (window.location.hash === 'Who-We-Are') {
    map.scrollIntoView({behavior: "smooth", block: "start"});
  }
});

#Who-We-Are {
  margin-top: 110vh;
}

.map-section {
  margin-top: 20vh;
}   

<section id="Who-We-Are">
  <h2>Who We Are</h2>
  <div class="map-section">Map</div>
</section>

Answer 2

этот код jquery / javascript поможет вам

    function hashchanged(){
        if(location.hash.substr(1)!='') $('html,body').animate({ scrollTop: ($('#'+location.hash.substr(1)).position().top-200) }, 'slow');
    }
    $(window).on('hashchange', function(e){
        hashchanged();
    });
    hashchanged();

Любой вопрос, который я здесь.

Answer 3

Ваш код:

$('.know-more-btn').click(function () {
   if(location.hash == "#Who-We-Are"){
    $('html, body').animate({
    scrollTop: $(".map-section").offset().top
}, 1000);
}
});

Новый код:

   if(location.hash == "#Who-We-Are"){
       $('html, body').animate({
       scrollTop: $(".map-section").offset().top
   }, 1000);


   $('.know-more-btn').click(function () {
      if(location.hash == "#Who-We-Are"){
       $('html, body').animate({
       scrollTop: $(".map-section").offset().top
     }, 1000);
    }
   });