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.
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;
});