Блог

Главная - Вопросы по программированию - Навигация с помощью привязки без изменения URL браузера и без javascript

Навигация с помощью привязки без изменения URL браузера и без javascript

#javascript #html

#javascript #HTML

Вопрос:

В моем приложении слева находится панель навигации, а справа — содержимое на панели. Когда вы нажимаете на элемент в панели навигации, он динамически загружает содержимое в панель содержимого с помощью jQuery ajax. Когда контент загружен, я обновляю URL браузера. Например:

 www.mysite.com/content.html#section1
www.mysite.com/content.html#section2
www.mysite.com/content.html#section3

В содержимом я хотел бы иметь ссылки на другие области в пределах того же содержимого, чтобы при нажатии на него содержимое прокручивалось до него. Если я использую типичные теги привязки, URL браузера будет обновлен, чего я хочу избежать. Я могу использовать обработчик кликов и некоторый Javascript для прокрутки до него. Но мне интересно, есть ли способ выполнить это без Javascript.

Ответ №1:

Можете ли вы выполнить это без Javascript? Ответ — нет, вы не можете.

Вам нужно использовать пользовательское событие щелчка.

Ответ №2:

 <!DOCTYPE html>
<html>
<head>
<style>
html {
  scroll-behavior: smooth;
}

#section1 {
  height: 600px;
  background-color: pink;
}

#section2 {
  height: 600px;
  background-color: yellow;
}
</style>
</head>
<body>

<h1>Smooth Scroll</h1>

<div class="main" id="section1">
  <h2>Section 1</h2>
  <p>Click on the link to see the "smooth" scrolling effect.</p>
  <a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
  <p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>

<div class="main" id="section2">
  <h2>Section 2</h2>
  <a href="#section1">Click Me to Smooth Scroll to Section 1 Above</a>
</div>

</body>
</html>

Ссылка PFB, которая может оказаться полезной:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_smooth_scroll

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

1. Я считаю, что это обновляет URL браузера. Вы не видите этого в приведенном вами примере, потому что w3schools заключает тестовый код во фрейм.

2. точно, просто создайте образец html-файла и вставьте его, а затем попробуйте запустить.

3. Поддержите это как правильный ответ, если это решило вашу проблему