Блог

Главная - Вопросы по программированию - Ссылка на другую страницу, прокрученная до привязки div

Ссылка на другую страницу, прокрученная до привязки div

#jquery #html #hyperlink #anchor #scrolltop

#jquery #HTML #гиперссылка #привязка #scrolltop

Вопрос:

Возможно ли иметь ссылку на другую страницу на вашем сайте, но браузер прокручивается до привязки div? Например, большая часть содержимого моего сайта находится на главной странице, разделенной на разделы, такие как about, contact и т.д.

Я хочу иметь возможность ссылаться с другой вложенной страницы на один из этих разделов.

Следующий код делает именно это, но работает только тогда, когда ссылка находится на той же странице, что и пункт назначения:

 <a href="#about" id="about-link">About</a>

JS:

 $("#about-link").click(function() {
  $('html, body').animate({
    scrollTop: $(".wrapper_about").offset().top
  }, 0);
});

Ответ №1:

Ваша ссылка должна включать имя файла другой страницы (и путь к файлу, если он не находится в том же каталоге):

 <a href="other_page.html#about" id="about-link">About</a>

Комментарии:

1. Перед применением вашего изменения назначение ссылки должно быть равно «example.com/subpage/#about «вместо example.com/#about. С вашим изменением адрес назначения URL правильный, и он приводит меня на домашнюю страницу, но без прокрутки до привязки.

2. Я должен отметить, что это установка WordPress, поэтому я применил «index.php#about»

3. Это зависит от того, какой у вас идентификатор привязки: в вашем примере HTML у вас есть #about , но в вашем jQuery у вас есть .wrapper_about (?)

4. Ну, #about-link — это идентификатор ссылки, который запускает jQuery при нажатии, .about_wrapper — это пункт назначения со смещением вершины прокрутки, а href я установил в #about, но, насколько я понимаю, это просто исправлено в URL для внешнего вида, если я изменю ahref на что-то вроде #test , код все равно будет работать в рабочем сценарии, где ссылки нет на другой странице.

5. Вы правы в том, что идентификатор элемента привязки должен соответствовать href, чтобы это работало при ссылке на другую страницу, мне также пришлось изменить смещение вершины прокрутки на target $ (window. location.hash) вместо привязки div. Спасибо за помощь!

Ответ №2:

Я заставил это работать, применив этот метод:

 <a href="#about" id="about-link">About</a>

JS:

 $("#about-link").click(function() {
  $('html, body').animate({
    scrollTop: $(window.location.hash).offset().top // Target hash not div
  }, 0);
});

Важно отметить, что ваш целевой параметр href должен соответствовать идентификатору элемента, к которому вы хотите привязаться.