javascript - 在 scrollTop 上使用 .animate

标签 javascript jquery jquery-animate

如何向这段代码添加 .animate?

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

我尝试在 scrollTop 之前添加 .animate,但它在 Dreamweaver 中一直显示错误。

感谢任何帮助。

编辑:

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


});
});

最佳答案

不太清楚你想要什么以及如何实现你的结果,但如果我理解你的意思你可以这样做:

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

和 jQuery:

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

#anchor 可以更改为您想要的内容,“返回顶部”将转到您的#anchor。只需确保 div(或在本例中为 h1)具有相同的 ID。

这是一个Fiddle

跳转到页面顶部的一个可能原因是您没有加载 jQuery。确保 jQuery 已加载。

编辑

好的,在你的编辑之后你应该改变这个

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

对此

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

点赞:Fiddle

关于javascript - 在 scrollTop 上使用 .animate,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17521234/

相关文章:

javascript - django javascript 不工作

javascript - jQuery - 结合 Glitch Effect 和 Write Effect 是有问题的

javascript - Jquery 选择除隐藏类型之外的所有输入

jquery - 更改 jQuery UI slider 值选项时动画 slider handle ?

jQuery 使动画仅在单击时发生一次

Java 中 JavaScript 风格的数组填充

javascript - 正则表达式替换表达式字符串中 JavaScript 中的整个单词

php - 使用ajax post方法将javascript对象传递给php文件

javascript - 如何获取单独变量中的数组值

javascript - 再次单击切换 div 时如何获得动态高度