Я хочу прокрутить страницу по конкретному URL-адресу

Question

На моей одной странице есть кнопка «Начать», а URL-адрес кнопки: URL-адрес: localadvertisingthat.com.com/test#my_site. Я хочу Когда я нажимаю на эту кнопку, она перенаправляется на конкретный раздел моей домашней страницы. Есть ли какой-либо код jquery для прокрутки страницы по определенному URL-адресу.

<a href="http://localadvertisingthatworks.com/test#my_site">Link</a> 
 

 
<a name="my_site>Anchor</a>

Я попробовал этот код, но он не работает в Firefox и ie.So пожалуйста, дайте мне немного Jquery код для всех браузеров.

Answer 1

Вам необходимо установить id на ваш section, поэтому он будет автоматически, прокручивается при загрузке.

<a href="http://localadvertisingthatworks.com/test/#my_site">Link</a> 
 

 
<a name="my_site>Anchor</a>

Answer 2

Ok, так сказать, что на главной странице, у вас есть раздел. В этом разделе должен быть какой-то идентификатор, например #my_section_id (html будет выглядеть так: <section id="my_section_id">...</section>). Тогда ваша кнопка должна указывать на него:

<a href="#my_section_id" class="scroll">My scrollable section</a> 

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

$(".scroll").on('click', function(e){ 
    e.preventDefault(); 
    var href = ($(this).attr('href') !== undefined) ? $(this).attr('href') : $(this).find('a').attr('href'); 
    var hash = href.split('#'); 
    var url_hash = '#' + hash[1]; 
    if ($(url_hash).length > 0) { 
     var offset = ($(window).width()<769) ? 20 : 100; 
     $('html, body').animate({ 
      scrollTop: $(url_hash).offset().top-offset 
     }, 1000); 
    } 
    else{ 
     location.href = href; 
    } 
}); 

if(window.location.hash){ 
    var hash = window.location.hash; 
    var $scrollto = $(hash); 
    if($scrollto.length){ 
     var offset = ($(window).width()<769) ? 20 : 100; 
     $('html, body').animate({ 
      scrollTop: $scrollto.offset().top-offset 
     }, 1000); 
    } 
} 

Смещение является то, что вам нужно настроить для себя

var offset = ($(window).width()<769) ? 20 : 100; 

В зависимости от того, насколько вы хотите, чтобы перейти к вашей секции.

В первой части мы позаботимся о том, чтобы вы прокручивались до этого раздела, если вы находитесь на одной странице, и у нас есть e.preventDefault();, чтобы предотвратить поведение ссылки по умолчанию. Вторая часть выглядит, если вы находитесь на другой странице и загружаете страницу, на которой находится прокрутка, и прокручивайте ее, когда вы на ней.

Единственная вещь, которую вы должны добавить, это класс .scroll. Это может быть немного сложно, если вы хотите добавить его в меню, но это возможно сделать с модификациями ходока.

Надеюсь, это поможет.