Вот код, который я использую на своей странице,
<li><a href="/explore/#Sound">Sound</a></li>
(в меню, которое отображается на всех страницах)
<a id="Sound"><a>
(на странице, на которой я хочу установить ссылку)
Я попытался добавить контент в теги с идентификатором. Но только в Chrome браузер не будет прокручиваться до тега. Эти якоря работают в IE & FF Любые идеи?
Оказывается, это была ошибка в некоторых версиях хром, обходное решение для всех, кто в ней нуждается!:)
$(document).ready(function () {
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (window.location.hash && isChrome) {
setTimeout(function () {
var hash = window.location.hash;
window.location.hash = "";
window.location.hash = hash;
}, 300);
}
});
Обходной ход не работал у меня, однако после нескольких дней поиска это, наконец, работало как шарм, поэтому я подумал, что стоит поделиться:
$(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;
}
}
});
});
Вот моя версия ответа @Jake_ для Chrome/angular, не прокручивающегося до правильной привязки при начальной загрузке страницы с помощью ui-router (оригинальный ответ привел бы мой код к исключениям "Transition superseeded"):
angular.module('myapp').run(function($transitions, $state, $document, $timeout) {
var finishHook = $transitions.onSuccess({}, function() { // Wait for the complete routing path to settle
$document.ready(function() { // On DOM ready - check whether we have an anchor and Chrome
var hash;
var params;
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
finishHook(); // Deregister the hook; the problem happens only on initial load
if ('#' in $state.params && isChrome) {
hash = $state.params['#']; // Save the anchor
params = _.omit($state.params, ['id', '#']);
$timeout(function() {
// Transition to the no-anchor state
$state.go('.', params, { reload: false, notify: false, location: 'replace' });
$timeout(function() {
// Transition back to anchor again
$state.go('.', _.assign($state.params, { '#': hash }), { reload: false, notify: false, location: 'replace' });
}, 0);
}, 0);
}
});
}, {invokeLimit: 1});
});
Не уверен, помогает ли это вообще или нет, но я понял, что якоря в IE работают, но не в Firefox или Chrome. Я закончил тем, что добавил ## к своим якорям, и это решило проблему.
пример: a href= "## policy"> Цель и выражение о политике
вместо:
a href= "# policy"> Заявление о целях и политике
У меня была и эта проблема (та же навигация по страницам с использованием ссылок), и решение было очень простым (хотя и разочаровывающим, чтобы понять). Надеюсь, это поможет - я также проверил IE, Firefox и Chrome, и это работало по всем направлениям (по состоянию на 05-22-2019).
Ваша ссылка должна выглядеть так:
<a href="pagename.html##anchorname">Word as link you want people to click</a>
и ваш якорь должен выглядеть так:
<a name="#anchorname">Spot you want to appear at top of page once link is clicked</a>
<html>
<body>
<li>
<a href="#Sound">Sound</a>
</li>
<a id="Sound" href="www.google.com">I AM CALLED</a>
</body>
</html>
используйте это как свой код, он будет вызывать анкерный тег с звуковым значением id
Просто измените вызов по вашей ссылке на внешний.
<a href="#nlink" class="external"> </a>