need a double function on a click

StackOverflow https://stackoverflow.com/questions/20776471

  •  21-09-2022
  •  | 
  •  

Frage

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

War es hilfreich?

Lösung 

$('html, body').animate({
    scrollTop: $("#contentart").offset().top
}, 2000);

See jQuery scroll to element

Andere Tipps

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

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top