Как перейти к разделу страницы

У меня есть целевая страница со ссылками. Как я могу направить пользователя в раздел другой страницы?

Главная страница:

<a href="/sample">Sushi</a>
<a href="/sample">BBQ</a>

Пример страницы:

<div id='sushi'></div>
<div id='bbq'></div>

Нажав на "суши" или "барбекю" на главной странице, нужно перейти к элементу с id sushi или bbq (соответственно) страницы sample.

Возможно ли это без JQuery? Я не против использования JQuery, но более простое решение с использованием html тоже будет работать.

Ответ 1

Использовать HTML привязки:

Главная страница:

<a href="sample.html#sushi">Sushi</a>
<a href="sample.html#bbq">BBQ</a>

Пример страницы:

<div id='sushi'><a name='sushi'></a></div>
<div id='bbq'><a name='bbq'></a></div>

Ответ 2

Оберните свой div с помощью

<a name="sushi">
  <div id="sushi">
  </div>
</a>

и ссылку на него

<a href="#sushi">Sushi</a>

Ответ 3

Использовать привязки.

Главная страница:

<a href="/sample#sushi">Sushi</a>
<a href="/sample#bBQ">BBQ</a>

Пример страницы:

<div id='sushi'><a name="sushi"></a></div>
<div id='bbq'><a name="bbq"></a></div>

Ответ 4

Главная страница

<a href="/sample.htm#page1">page1</a>
<a href="/sample.htm#page2">page2</a>

примеры страниц

<div id='page1'><a name="page1"></a></div>
<div id='page2'><a name="page2"></a></div>

Ответ 5

Это возможно с помощью HTML с помощью якорей. Если вы хотите переместить пользователя в указанный раздел, прочитайте тег HTML 'a'.

W3Chools: 1 | 2

Ответ 6

Используйте секцию call-up, она работает

<div id="content">
     <section id="home">
               ...
     </section>

Вызовите выше

 <a href="#home">page1</a>

Для прокрутки требуется, чтобы jquery вставлял это.. сверху на конец тега закрытия тела.

<script>
  $(function() {
      $('a[href*=#]:not([href=#])').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) {
                  $('html,body').animate({
                      scrollTop: target.offset().top
                  }, 1000);
                  return false;
              }
          }
      });
  });
</script>

Ответ 7

Мои решения:

$('body').scrollspy({target: '.target', offset: fix_header_height})

$('.target').click(function () { $('body').animate( { scrollTop: $($(this).attr('href')).offset().top - fix_header_height }, 500) return })