How can i scroll to specific ID using Header?


Tags: php,jquery,html,css

Problem :

Like the link : http://getbootstrap.com/css/#type
Here when you open this link, Window will automatically scroll to the type id.
How did they do it?
I mean, how to scroll to a specific id on the same page using Header like some.com/post/#id Please comment below if you need more clarification.

EDIT 2 : Okay home.php#26 this is working..
But this is working only wen the page is already loaded and then i change the header.. i want it to work when page is loaded First time with this url only.

Like when u open http://getbootstrap.com/css/#type It automatically takes you to id "type". But when i load mywebsite/home.php?#26 it does nothing.



Solution :

If you want to use headers, first include in the target GET variable to id where you want to scroll to.

Eg - /home.php?target=12 (12 is the id here)

Then use the following script:

$(window).load(function(){
    $('html,body').animate({ scrollTop: $('#<?php echo $_GET['target'];  ?>').offset().top - 100 }, 'slow');
});

Here you go with Your scroll plus cool jQuery effect. :)


    CSS Howto..

    CSS how to make special div shape

    CSS: How to accomplish a div which is blurred at the edges?

    How to apply gradient color in css?

    HTML - How do css/javascript files get loaded?

    How to show the vertical image into horizontal manner using HTML and CSS?

    How can i make a fixed box inside a div with scroll?

    Dropdown not showing on small screens

    how to organize all js, css, php and html code?

    CSS - How to Draw a Multi-Coloured Line?

    How to use css media query to switch animations

    How can I style a select option like a table?

    How to dynamically reload a .css?

    How to center in
    without text-align?

    How to isolate PrimeFaces Widget from being affected by main site CSS

    How to fit these divs inside a div to occupy whole horizontal width

    How do I modify the bootstrap carousel javascript file so that it can trigger this function?

    How (where) can i set fixed cell size in nested html tables, with css?

    How to track element movement and trigger function at specific spot?

    How to utilize CSS only button markup?

    How can I make this little javascript work with 2 textarea elements without killing the CSS?

    How to remove blue underline on text in Chrome - CSS?

    On css: if text line is break show dots

    How to let the users style a web component with their own CSS?

    How to fix when someone edits css output of an existing sass file

    IE10 has extra margin above an inline header. How do I remove it?

    How to trigger self hover on child element

    How do I design a css gradient to look like the attached Facebook Login screen

    Show and hide table column using jQuery

    How to implement CSS sprite background into existing Javascript variable?

    How to change the height of div with the content of other div