CODEWITHSUNDEEP
phpjquery
Vky Arain
Vky Arain

Reputation: 11

click on button scroll to particular div?

Hello Everyone,

Iam new in php. i wants to scroll down to my div to click on button. please help me that how i do this. when i click on button the scroll slightly move to my div.

Iam using this code

  <script type="text/javascript">
    $(document).ready(function() {
    $('#scroll').click(function() {
    $.scrollTo($('#res'), 500);
    })
  });
 </script>


<input type="button" value="Scroll" id="scroll" />

<div id="data">one big idea.
<div class="res" id="res">
<h2>RESULT</h2>
one big idea..
</div>
<p>one big idea.</p>
</div>

Thanks in advance

Upvotes: 0

Views: 4240

Answers (4)

S.Visser
S.Visser

Reputation: 4725

ScrollTo is not an exsisting jquery function.

You can use a combination of ScrollTop click and Animate click to simulate it. Something like this:

 $(document).ready(function() {
    $("#scroll").click(function() {
      $('html, body').animate({
        scrollTop: $("#res").offset().top
      }, 2000);
   });
 });

http://jsfiddle.net/QW5WJ/

Upvotes: 0

gmo
gmo

Reputation: 9010

I use this one...

//  [a] obj to scroll to, mandatory, like, '#id' or '.class'
//  [c] miliseconds, default 1 sec. if not set
//  [b] offset from top, default 0 if not set
function sTo(a,c,b){
    if(typeof(a)=="undefined")return;
    c=typeof(c)!="undefined"?c:1000;
    b=typeof(b)!="undefined"?b:0;
    jQuery("html,body").stop(true,true).animate({scrollTop:jQuery(a).offset().top+b},c,function(){
        // if you want a callback function, call it here
    });
}

then, just call it like:

<input type="button" value="Scroll" id="scroll" onclick="sTo('#res',500,50)"/>

Upvotes: 0

Vaibs_Cool
Vaibs_Cool

Reputation: 6156

$(".jumper").on("click", function( e ) {

    e.preventDefault();

    $("body").animate({ 
        scrollTop: $( $(this).attr('href') ).offset().top 
    }, 600);

});

DEMO WORKING for LABEL ..

Upvotes: 1

Romaindr
Romaindr

Reputation: 311

$('#scroll').click(function() {
  $('html,body').animate({'scrollTop':$('#res').position().top}, 500);
});

Upvotes: 3

Related Questions