Как сохранить фокус на текущей таблице данных на длинной странице данных [дублировать]

Вы должны изменить

<a href="#">My Link</a>

на

<a href="javascript:;">My Link</a>

. Таким образом, когда нажимается ссылка, страница не будет прокручиваться вверх. Это более чистое, чем использование href = "#", а затем предотвращение запуска по умолчанию.

У меня есть веские причины для этого в первом ответе на этот вопрос , например return false; не будет выполняться, если вызываемая функция выдает ошибку или вы можете добавить функцию return false; к функции doSomething(), а затем забудьте использовать return doSomething();

При вызове функции следуйте этому примеру return false:

<input  type="submit" value="Add" onclick="addNewPayment();return false;">

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

Если вы можете просто изменить значение href, вы должны использовать:

<a href="javascript:void(0);">Link Title</a>

Еще одно опрятное решение, с которым я только что придумал, - это использовать jQuery, чтобы остановить действие click. страницы для прокрутки, но только для ссылок href="#".

<script type="text/javascript">
    /* Stop page jumping when links are pressed */
    $('a[href="#"]').live("click", function(e) {
         return false; // prevent default click action from happening!
         e.preventDefault(); // same thing as above
    });
</script>

Для Bootstrap 3 для коллапса, если вы не укажете цель данных на якоре и не полагаетесь на href для определения цели, событие будет предотвращено. Если вы используете цель данных, вам нужно будет предотвратить это событие самостоятельно.

<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo">Collapse This</button>

<div id="demo" class="collapse"> 
<p>Lorem ipsum dolor sit amet</p>
</div>

Кроме того, вы можете использовать event.preventDefault внутри атрибута onclick.

<a href="#" onclick="event.preventDefault(); doSmth();">doSmth</a>

Не нужно писать событие exstra click.

Возврат false из кода, который вы вызываете, будет работать, и в ряде случаев это предпочтительный метод, но вы также можете это сделать

<a href="javascript:;">Link Title</a>

. Когда дело доходит до SEO, это действительно зависит от того, что ваша ссылка будет использована для. Если вы собираетесь использовать его для ссылки на какой-либо другой контент, то я бы согласился в идеале, что вы хотите что-то значимое здесь, но если вы используете ссылку для функциональных целей, возможно, например, Stack Overflow делает для панели сообщений (жирный, курсив, гиперссылка , и т. д.), то это, вероятно, не имеет значения.

<a onclick="yourfunction()">

это будет работать нормально. нет необходимости добавлять href = "#"

Попробуйте следующее:

<a href="#" onclick="return false;">My Link</a>

Легким подходом является использование этого кода:

<a href="javascript:void(0);">Link Title</a>

Этот подход не заставляет обновлять страницу, поэтому полоса прокрутки остается на месте. Кроме того, он позволяет программно изменять событие onclick и обрабатывать привязку к стороне клиента с помощью jQuery.

По этим причинам вышеприведенное решение лучше, чем:

<a href="javascript:myClickHandler();">Link Title</a>
<a href="#" onclick="myClickHandler(); return false;">Link Title</a>

, где последнее решение позволит избежать проблемы с прокруткой, если и только если метод myClickHandler не завершился неудачей.

Ссылка на что-то более разумное, чем верхняя часть страницы в первую очередь. Затем отмените событие по умолчанию.

См. правило 2 прагматического прогрессивного улучшения .

Возможно, вы захотите проверить свой CSS. В примере здесь: https://css-tricks.com/the-checkbox-hack/ есть position: absolute; top: -9999px;. Это особенно неприятно для Chrome, так как onclick="whatever" все еще перескакивает в абсолютное положение щелкнутого элемента.

Удаление position: absolute; top: -9999px;, для display: none; может помочь.

Вы можете просто написать так же: -

<a href="#!" onclick="function()">Delete User</a>