Using .animate on scrollTop

问题

How do I go by adding .animate to this piece of code?

$("body,html").scrollTop($("#wrapper3").position().top);

I have tried adding .animate before scrollTop, but it keeps showing an error in Dreamweaver.

Any help is appreciated.

EDIT:

HTML

<!DOCTYPE html>
<meta charset=utf-8>
<html lang="da">
<html>
<head>
<link href="_css/fddkStyles.css" rel="stylesheet" type="text/css" />
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script src="_jquery/jquery-1.10.1.min.js"></script>




<title>Title of the document</title>
</head>

<body>
<div id="wrapper">
<div id="bar16"></div>
</div>

<div id="wrapper2">
</div>

<div id="wrapper3">
</div>


<script src="_jquery/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="_jquery/TweenMax.min.js"></script>
<script src="_jquery/my.js" type="text/javascript"></script>
<script src="_jquery/jquery.scrollTo-1.4.3.1-min.js"></script>


</body>

</html>

JavaScript

$(document).ready(function(e) {
    $("#bar16").click(function() {
$("body,html").scrollTop($("#wrapper3").position().top);


});
});

回答1:

It's not very clear what and how you want to achieve your result, but if I understood what you meant you can do:

<h1 id="anchor">Lorem Ipsum</h1>
<p><a href="#anchor" class="topLink">Back to Top</a></p>

And jQuery:

    $("a.topLink").click(function() {
        $("html, body").animate({
            scrollTop: $($(this).attr("href")).offset().top + "px"}, {duration: 500, easing: "swing"
        });
        return false;
    });

The #anchor can be changed to what you want and the "Back to Top" is going to go to your #anchor. Just make sure the div (or in this case h1) has an idenditcal id.

Here is a Fiddle

A POSSIBLE REASON for jumping to the top of the page is the fact you have NOT loaded jQuery. Make sure jQuery IS LOADED.

EDIT

Ok after your edits you should just change this

<div id="bar16"></div>

to this

<div id="bar16">
    <a href="#wrapper3" class="topLink">CLICK HERE</a></div>
</div>

Like here: Fiddle

来源：https://stackoverflow.com/questions/17521234/using-animate-on-scrolltop

标签

javascript

jquery

jquery-animate