CODEWITHSUNDEEP
javascripthtml
Zach Starnes
Zach Starnes

Reputation: 3198

Link to scroll to top not working

I can not figure out why this is not giving me an animation. It goes to the top of the page like it supposed to but there is no animation. Can someone help me find out why?

here id the javascript code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript">
$(document).ready(function() {

    $('.scrollup').click(function(){
    $("html, body").animate({ scrollTop: target_top }, 600);
    return false;
    });

});
</script>

</head>

<body id="top">

and here is the link that i need to perform the scroll.

<td><a href="#top" class="scrollup">Back to Top</a></td>

again, it goes to the top of the page but there is no animation.

edit here is the entire html file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript">
$(document).ready(function() {

    $('.scrollup').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 600);
    return false;
    });

});
</script>

</head>

<body id="top">
<div id="header">
    <div class="container">
      <div id="title">Name</div>
        <div id="tagline">Web Designer + Programmer</div>
      <div id="navbar">
            <table>
                <tbody>
                    <tr>
                        <td><a href="#services">Services</a></td><td><a href="#about">About</a></td><td><a href="#contact">Contact</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div id="services">
    <div class="container">
        <div id="servicescontent"></div>
    </div>
</div>

<div id="about">
    <div class="container">
        <div id="aboutcontent"></div>
    </div>
</div>

<div id="services2">
    <div class="container">
        <div id="services2content"></div>
    </div>
</div>

<div id="contact">
    <div class="container">
        <div id="contactinfo"></div>
    </div>
</div>

<div id="footer">
    <div class="container">
        <div id="copyright">Copyright 2013</div>
        <div id="footernavbar">
            <table style="font-size: 16px;">
                <tbody>
                    <tr>
                        <td><a href="#about">About</a></td><td><a href="#services">Services</a></td><td><a href="#top" class="scrollup">Back to Top</a></td>
                    </tr>
                </tbody>
            </table>
        </div></div>
    </div>
</div>

</body>
</html>

Upvotes: 0

Views: 2577

Answers (2)

Gary Stevens
Gary Stevens

Reputation: 693

@skidadon is correct, 0 will probably solve it. But you've also got some incorrectly formatted script tags. You need a separate tag for Jquery and a separate one for the code you're running. It might also help to use event.preventDefault() at the top of your event handler. Here's a simple edit of your code:

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
                $('.scrollup').click(function(event){
                    event.preventDefault();
                    $("html, body").animate({ scrollTop: 0 }, 600);
                });
        });
    </script>
</head>
<body id="top">

    <div style="height: 900px">
        Some content
    </div>
    <div>
        <a href="#" class="scrollup">go to top</a>
    </div>
</body>
</html>

Hope that helps.

Upvotes: 2

skidadon
skidadon

Reputation: 547

It's not target_top, it's 0

$("html, body").animate({ scrollTop: 0 }, "slow");

That should do the trick.

Upvotes: 3

Related Questions