$('html, body').animate({
scrollTop: $("#contentart").offset().top
}, 2000);
need a double function on a click
Вопрос
please I am not a expert developer and I need a help on this function; I write from Italy, sorry for my english.
I have my page.html with this function:
<script type="text/javascript">
$(document).ready(function() {
// select all the links with class="art", when one of them is clicked, get its "href" value
// load the content from that URL and place it into the tag with id="contentart"
$('a.art').click(function() {
var url = $(this).attr('href');
$('#contentart').load(url);
return false;
});
});
</script>
in the html code I have a lot of
<a class="art" href="part1.html">link 1</a>
<a class="art" href="part2.html">link 2</a>
<a class="art" href="part3.html">link 3</a>
ecc. ecc
and at end the container:
<div style="width: 100%" id="contentart"></div>
My problem is that when the customer makes click on the link href, the div opens at very long distance (2 or 3 screen bottom) because ther're meny links and the customer does not see it. The question: is possible a function that include the page in the "contentart" and makes a scrollTo until the top of this DIV "contentart"? Much thanks from Italy. Arcibald
Решение
Другие советы
Try this. I had added animated scroll to your div
<script type="text/javascript">
$(document).ready(function() {
// select all the links with class="art", when one of them is clicked, get its "href" value
// load the content from that URL and place it into the tag with id="contentart"
$('a.art').click(function() {
var url = $(this).attr('href');
$('#contentart').load(url);
$('html,body').animate({scrollTop: parseInt($('#contentart').offset().top)}, 'slow');
return false;
});
});
</script>
Another approach to quickly scroll to a location within the same page is to
use an anchor with an id inside it
Example:
<body>
<p><a href="#foo">Go to foo</a></p>
<h2>alpha</h2>
<p>alpha alpha</p>
<h2>beta</h2>
<p>beta beta</p>
<h2><a id="foo">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>gamma</h2>
<p>gamma gamma</p>
futher reading here