Jquery scroll to ellement

So you want to scroll to a position on a page with jquery try this !

// Scrolls to the selected id on the page
    $(function() {
        $('#trigger_id').click(function() {
            
                var target = $('#about');
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html,body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            
        });
    });

Usage in html go with this :

<a href="#about" class='btn' id='trigger_id'> Click me </a>
<br/>
<!-- lots of content here -->

<!-- Ellement you want to scroll to -->
<div id="about">
<!-- put anchor here for fall back   --><a name='about'></a>
Some content ...
</div>

this can be done like this ... as well

// Scrolls to the selected menu item on the page
    $(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;
                }
            }
        });
    });

but can mess with other links on the page .. but have a go :)

Category: