Wednesday, 8 June 2016

jQuery jump or scroll to certain position, div or target on the page from button onclick

how to scroll page onclick of link button

hello,
First of all you should be add this Code and jquery pulgin under head tag.
 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script>
        $(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;
                    }
                }
            });
        });

</script>

And then after modify below code according to your need.

<a hef="#Section1">Section1</a><br>
<a hef="#Section2">Section2</a><br>
<div id="Section1" style="height:300px;background-color:#f89f9f">Hello</div>
<div id="Section2" style="height:300px;background-color:#8986fe">Vineet</div>