Replace with Jquery Animation Scroll

Question

I'm really new to JQuery and SO. Always found great help here but now i really need some help.

I found this link here on SO, Smooth scrolling when clicking an anchor link, and its great until i try replacing it with a label tag. I tried several things and searched quite a bit. I hope i am not missing something obvious.. Anyways, here is the code.

<head>
<script type="text/javascript">
$('label').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'onclick') ).offset().top
}, 500);
return false;
}); 
</script>
</head>

<body>

<!--(START) THIS IS THE LABEL I WANT TO CLICK (START)-->
<div id="top">
    <input type="checkbox" class="toggle" id="button">
        <label class="linkbutton" onclick="window.location.href='#SCROLL'" for="button">
            <h2>Click This Text = Scroll Down</h2>
        </label>
</div>
<!--(START) END OF LABEL (START)-->

<div id="left"></div>
<div id="mid-container">

<!--(END) WHERE I WANT TO GO SMOOTHLY(END)-->
<div class="mid">
    <div class="section"><label id="SCROLL"></label>
        <h2>This is the section I want to go to.... SMOOTHLY</h2>
    </div>
</div>
<!--(END) WHERE I WANT TO GO SMOOTHLY (END)-->

</body>
</html>

The label directs me to where i want to go but does not have any smoothness to it. Thanks for your help.

The Process · Accepted Answer · 2016-04-05T15:14:27.150

You can use custom data- attributes to hold href values you want to scroll to:

HTML

<div id="top">
   <input type="checkbox" class="toggle" id="button">
   <label class="linkbutton" data-href="#SCROLL" for="button">
     <h2>Click This Text = Scroll Down</h2>
   </label>
</div>
<!--(START) END OF LABEL (START)-->

<div id="left"></div>
<div id="mid-container">

 <div class="mid">
    <div class="section"><label id="SCROLL"></label>
         <h2>This is the section I want to go to.... SMOOTHLY</h2>
    </div>
 </div>

Jquery

 $('label').click(function() {
      href = $(this).data('href');
      $('html, body').animate({
        scrollTop: $(href).offset().top
      }, 500);
      return false;
  });

Check the example

Thanks alot. That was just what i was looking for. Much appreciated. — Guillaume Palm, Feb 19 '16 at 16:27

score 0 · Answer 2 · answered Feb 19 '16 at 13:04

0

HTML

<label class="linkbutton" data-href="#SCROLL" for="button">

JS

$('label').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).data('href') ).offset().top
    }, 500);
});

answered Feb 19 '16 at 13:04

kp singh

1,430
8
21

Replace with Jquery Animation Scroll

2 Answers2