slide page down after php loads content

Question

How to make a script that slides down content AFTER whole page is loaded.

For example I click a link like index.php?category=1. After that page is loaded and I need to slide down page to specific ID.

How to do that?

I have tried something like this: if(isset($_GET['cat'])) { echo ""; } but it is not working :( — , Apr 24 '13 at 19:41
it sounds like you mean "scroll the page" not slide the page down or slide the content down. these are two very different things. — user428517, Apr 24 '13 at 21:48

score 2 · Answer 1 · answered Apr 24 '13 at 19:42

2

Use an anchor.

Modify your URL to include an anchor:

index.php?category=1#targetElement

Then add an ID to the element that should come into focus when the page loads:

<div id="targetElement">

answered Apr 24 '13 at 19:42

George Cummins

28,485
8
71
90

Unfortunately it is not working :( – Apr 24 '13 at 19:44
@user2317095 Please define "not working." What did you try, and how did the attempt fail? You can update your question with your new code. – George Cummins Apr 24 '13 at 19:45
I have added #targetElement to href just like You wrote. Page was reloaded but still stay at the top. – Apr 24 '13 at 19:46
@user2317095 Do you have an element with an ID 'targetElement'? If so, please post the code that defines that element. – George Cummins Apr 24 '13 at 19:48
the html:

Portfolio

category 1 category 2 category 3

and the php: if(isset($_GET['cat'])) { echo ""; } – Apr 24 '13 at 19:53
1

@user2317095 'targetElement' does not match anything that you posted here. Give one of those elements an ID and then use the same ID after the hash mark('#') in the URL – George Cummins Apr 24 '13 at 19:55

pdegand59 · Answer 2 · 2013-04-24T19:52:24.807

0

If you have an anchor on your page like <div id="anchor">, you can use this script that while slide the page to the anchor position when the page is loaded :

$(function() {
    var anchorPos= $('#anchor').offset().top;
    $('html, body').animate({scrollTop:anchorPos}, 'slow');
});

EDIT : Fiddle example of this working solution

edited Apr 24 '13 at 19:52

answered Apr 24 '13 at 19:47

pdegand59

12,776
8
51
58

It works fine but without page reloading – Apr 24 '13 at 20:01

score 0 · Answer 3 · edited May 23 '17 at 10:33

do you need to animate the slide down of the page or you just need the functionality?

if no, cant you just use <a name="anchor"></a> somewhere you want to scroll the page into? besides, that's what its for right?

now make it slide down, you can use index.php?category=1#anchor

but if you need it to be animated, you need to add these code as specified on another link here in stackoverflow Simple jQuery scroll to anchor up or down the page...?

var aTag = $("a[name='anchor']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');

slide page down after php loads content

3 Answers3

Portfolio