Я создал HTML-страницу с несколькими таблицами с такими заголовками: Content, Main_Page, Document, Expenses и т.д.
Я хочу создать ссылку для верхней части страницы. Когда я нажимаю эту ссылку, она должна перейти к определенному разделу. Поэтому я использую приведенный ниже код для сопоставления содержимого. Но это не работает для меня.
<a href="#Content">Content Section</a>
Вам нужно создать привязку для ссылки. Современный способ сделать это - дать соответствующему элементу атрибут id="Content". Более старый способ сделать это - использовать <a name="Content"></a>.
Дайте элементу, который вы хотите "перейти" к четкому идентификатору, например:
<p id="idOfTag">Your content goes here</p>
Затем в ссылке в верхней части страницы сделайте ссылку на идентификатор этого элемента (ум #):
<a href="#idOfTag">Jump</a>
Полный пример с несколькими ссылками:
<ul>
<li><a href="#contentParagraph">Content</a></li>
<li><a href="#mainPageParagraph">Main page</a></li>
<li><a href="#documentParagraph">Document</a></li>
<li><a href="#expensesParagraph">Expenses</a></li>
</ul>
<p id="contentParagraph">
<h4>Content</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p id="mainPageParagraph">
<h4>Main page</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p id="documentParagraph">
<h4>Document</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p id="expensesParagraph">
<h4>Expenses</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>Для достижения этого можно использовать атрибут name для тэга anchor.
Скажем, у вас есть div с id content
<div id="content">This is my div</div>
Затем убедитесь, что у вас есть тег anchor с атрибутом name, похожим на id div content
<a href="#" name="content">Click to go to the top</a>
Прокрутите вниз, чтобы увидеть ссылку
Другим способом сделать это будет
<div id="content">My div</div>
Тогда ваш якорный тег href должен быть #content
<a href="#content">Click to go to top</a>
Похоже, на вопрос был дан ответ, но если вы хотите использовать эффект прокрутки при переходе к этим элементам здесь немного JS snipt. $ (function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('html', 'body');
// Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
$('a[href*=#]').each(function() {
// Ensure it a same-page link
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'') ) {
// Ensure target exists
var $target = $(this.hash), target = this.hash;
if (target) {
// Find location of target
var targetOffset = $target.offset().top;
$(this).click(function(event) {
// Prevent jump-down
event.preventDefault();
// Animate to target
$(scrollElem).animate({scrollTop: targetOffset}, 2000, function() {
// Set hash in URL after animation successful
location.hash = target;
});
});
}
}
});
// Use the first element that is "scrollable" (cross-browser fix?)
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}
});