I am trying to create an anchor link that when clicked will scroll down the page.

the script:

<script type="text/javascript">                         
$(document).ready(function() {
    function scrollWin(){
        $('html,body').animate({
            scrollTop: $("#scrollToHere").offset().top
        }, 800);
    }
});
</script>

the link:

<a class="icon_button" href="#"  onclick="scrollWin();" ><i class="icon-chevron-down "></i> </a>

and then the div to be scrolled to:

<div id="scrollToHere">
Scroll to here
</div>

What am I missing?

I am trying to create an anchor link that when clicked will scroll down the page.

the script:

<script type="text/javascript">                         
$(document).ready(function() {
    function scrollWin(){
        $('html,body').animate({
            scrollTop: $("#scrollToHere").offset().top
        }, 800);
    }
});
</script>

the link:

<a class="icon_button" href="#"  onclick="scrollWin();" ><i class="icon-chevron-down "></i> </a>

and then the div to be scrolled to:

<div id="scrollToHere">
Scroll to here
</div>

What am I missing?

• javascript
• jquery

Share Improve this question Follow edited Aug 16, 2013 at 17:23 Huangism 16.4k77 gold badges5050 silver badges7575 bronze badges asked Aug 16, 2013 at 17:17 SacklingSackling 1,82055 gold badges4242 silver badges7373 bronze badges 11

• 4 The function is called scrollWin() and you missed "r" in onclick event on the anchor tag - scollWin(). – Mario Dian Commented Aug 16, 2013 at 17:20
• 4 try removing the $(document).ready(function() { wrapper – bluetoft Commented Aug 16, 2013 at 17:24
• 1 I agree with Bluetoft, I think wrapping it in doc ready made it in that scope so the onclick call does not work since the function does not exist – Huangism Commented Aug 16, 2013 at 17:25
• 1 Works fine here jsfiddle/j08691/NMSFf – j08691 Commented Aug 16, 2013 at 17:25
• 1 and doesn't work here jsfiddle/NMSFf/1 which loads the function when dom is ready – Huangism Commented Aug 16, 2013 at 17:26

 |  Show 6 more ments

2 Answers 2

Sorted by: Reset to default 4

http://jsfiddle/mA34T/

$('#foo').click(function () {
    $('html,body').animate({
        scrollTop: $("#scrollToHere").offset().top
    }, 800);
});

Would that fix your issue?

try removing the '$(document).ready(function() {' wrapper

There is no need to wrap this as you're just declaring a function.