I have a landing page with links. How can I direct user to a section of a different pag开发者_如何学编程e?
Main Page:
<a href="/sample">Sushi</a>
<a href="/sample">BBQ</a>
Sample Page:
<div id='sushi'></div>
<div id='bbq'></div>
Clicking on "Sushi" or "BBQ" in the Main Page should navigate the user to the div with id sushi
or bbq
(respectively) of the page sample
.
Is it possible without JQuery? I do not mind using JQuery but a simpler solution using html would work too.
Use HTML's anchors:
Main Page:
<a href="sample.html#sushi">Sushi</a>
<a href="sample.html#bbq">BBQ</a>
Sample Page:
<div id='sushi'><a name='sushi'></a></div>
<div id='bbq'><a name='bbq'></a></div>
Wrap your div with
<a name="sushi">
<div id="sushi">
</div>
</a>
and link to it by
<a href="#sushi">Sushi</a>
Use anchors.
Main Page:
<a href="/sample#sushi">Sushi</a>
<a href="/sample#bBQ">BBQ</a>
Sample Page:
<div id='sushi'><a name="sushi"></a></div>
<div id='bbq'><a name="bbq"></a></div>
Use an call thru section, it works
<div id="content">
<section id="home">
...
</section>
Call the above the thru
<a href="#home">page1</a>
Scrolling needs jquery paste this.. on above to ending body closing tag..
<script>
$(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;
}
}
});
});
</script>
Use hypertext reference and the ID tag,
Target Text Title
Some paragraph text
Target Text<h1><a href="#target">Target Text Title</a></h1>
<p id="target">Target Text</p>
Main page
<a href="/sample.htm#page1">page1</a>
<a href="/sample.htm#page2">page2</a>
sample pages
<div id='page1'><a name="page1"></a></div>
<div id='page2'><a name="page2"></a></div>
My Solutions:
$("body").scrollspy({ target: ".target", offset: fix_header_height });
$(".target").click(function() {
$("body").animate(
{
scrollTop: $($(this).attr("href")).offset().top - fix_header_height
},
500
);
return;
});
精彩评论