добавить хэш с помощью javascript к URL без прокрутки страницы?

StackOverflow https://stackoverflow.com/questions/1439895

  •  10-07-2019
  •  | 
  •  

Вопрос

добавить хэш к URL-адресу без прокрутки страницы?с помощью javascript

  1. я открываю страницу
  2. я прокручиваю страницу вниз
  3. я нажимаю на ссылку, которая добавляет хэш (возможно, со значением #test) (пример: http://www.example.com/#test)
  4. страница не ДОЛЖНА прокручиваться обратно к началу.

как это можно сделать?

примечание:просто проверяю, возможно ли отключить перемещение, даже если есть какой-то тег с id="test" пока возвращаемое значение false;работает нормально (для поддержки пользователей без javascript), а также для того, чтобы избежать присутствия идентификаторов в html, но это не проблема с такими вещами, как числа, такие как 1, 2, 3 (они в любом случае не разрешены в качестве идентификаторов)

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

Это было полезно?

Решение

Любой хэш, которого нет на странице, должен приводить к такому поведению.Например, эта ссылка указывает на несуществующий хэш на этой странице.(Ссылка протестирована с Chrome 2.0 и IE 6 (единственными браузерами, доступными мне на данный момент).)

Поэтому, если ваш URL-адрес заставляет вас переходить в начало страницы, убедитесь, что у вас нет ничего на странице, чей идентификатор или имя соответствует этому адресу.

Другие советы

Любой из приведенных ниже примеров должен делать то, что вы хотите:

<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<a href="pleaseEnableJS.html"
    onclick="window.location.hash = '#test1';return false;">Test 1</a>
<a href="#test2">Test 2</a>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>

Если есть какой-либо элемент с id="test1" или id="test2" или <a name="test1"></a> или <a name="test2"></a> на вашей странице он будет прокручиваться до этого элемента, в противном случае он должен работать так, как вы просили.

Если у вас есть код, который работает не так, как ожидалось, пожалуйста отредактируйте свой вопрос и включите небольшой пример HTML и JavaScript, которые работают не так, как ожидалось.

Каждый браузер будет интерпретировать хэш-значение как "перейти к этому идентификатору DOM".Вы могли бы попробовать две вещи, о которых я могу подумать:

  1. Сделайте так, чтобы действие, добавляющее хэш, возвращало значение false, тем самым отключив необходимость браузера искать его

  2. Добавьте тег DOM с идентификатором хэша, который вы добавляете, прямо там, где находится щелчок, чтобы остановить перемещение браузера.Но, вероятно, это не то, что вы хотите, поскольку вы добавляете хэш для чего-то.

Ответ Уэлбога работает нормально, но оставляет #nonexistantanchor хэш в адресной строке браузера.

Чтобы сделать это с помощью jQuery, вы можете добавить класс к привязке и использовать предотвратить дефолт способ отключить как навигацию, так и изменение URL-адреса.

<a href='#' class="nodefault">Clickable</a>

<script>
$("a.nodefault").click(function(event) {
  event.preventDefault();
});
</script>

Конечно, эстетическая дилемма теперь заключается в том, что предпочтительнее: элегантный URL-адрес или решение без javascript.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top