Javascript 是什么导致我的scrollTo功能出现问题？_Javascript_Jquery_Html

Javascript 是什么导致我的scrollTo功能出现问题？

javascript jquery html

Javascript 是什么导致我的scrollTo功能出现问题？,javascript,jquery,html,Javascript,Jquery,Html,我的页面底部有一个按钮，点击时应该滚动到页面顶部我使用了来自另一个站点的相同代码来实现此功能，但由于某些原因，当前站点中没有使用scrollTop功能我已经用页面上的另一个元素测试了效果，如果我将“button”设置为不同的div，效果会很好，但是当我将其还原为我希望能够从中单击的div时，该功能再次失效这是我的代码，如果有人可能知道什么是错的这是一张实际页面的拼图我头上的标签： <link rel="shortcut icon" href="images/favi.ico" /

我的页面底部有一个按钮，点击时应该滚动到页面顶部

我使用了来自另一个站点的相同代码来实现此功能，但由于某些原因，当前站点中没有使用scrollTop功能

我已经用页面上的另一个元素测试了效果，如果我将“button”设置为不同的div，效果会很好，但是当我将其还原为我希望能够从中单击的div时，该功能再次失效

这是我的代码，如果有人可能知道什么是错的

这是一张实际页面的拼图

我头上的标签：

<link rel="shortcut icon" href="images/favi.ico" />
<link href="css/about-3elements.css" rel="stylesheet">
<link href="css/pages.css" rel="stylesheet">
<link href="css/page-transitions.css" rel="stylesheet">
<link href="css/footer.css" rel="stylesheet">
<link href="css/responsive-mobile.css" rel="stylesheet">
<link href="css/responsive-tablet.css" rel="stylesheet">
<link href="css/responsive-1025-1500px.css" rel="stylesheet">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>

脚本：

<script><!-----------------------------CONTROLS FOOTER BUTTON THAT GOES TO THE TOP OF THE PAGE----------------------------------->
$(document).ready(function(){
    $(this).scrollTop(0);
});

$("#nav-arrow").click(function() {
    $('html, body').animate({
        scrollTop: $("html").offset().top
    }, 750);
});
</script>
HTML:

<footer class="bottom-footer">
<div id="nav-arrow"><img src="images/nav-arrow.svg" width="35%"><br><span class="arrow-text" style="width:100px; color:#f8f4ec; font-family:myriad pro, arial, sans-serif; font-size:1.25em;">Back to top</span></div>

<section class="footer-section">
<ul>
    <li><a href="faq.html">FAQ</a></li>
    <li><a href="terms-of-use.html">TERMS</a></li>
    <li><a href="usage-rights.html">USAGE RIGHTS</a></li>
    <li><a href="privacy-policy.html">PRIVACY POLICY</a></li>
    <li><a href="contact.html">CONTACT</a></li>
    <li><a href="the-editors.html">MEET THE STAFF</a></li>
</ul>

<div id="social-links-container">
<ul class="social" style="height:40px;">
<li><a href="https://twitter.com/3ElementsReview" title="Follow @3ElementsReview" target="_blank"><img src="images/twitter.svg" width="25%" alt="If you like our literary journal, follow 3Elements Review on Twitter" border="none"></a></li>
<li><a href="https://www.facebook.com/pages/3Elements-Review/165239120323115" title="Like us on Facebook" target="_blank"><img src="images/facebook.svg" width="25%" alt="If you find our literary journal interesting, like 3Elements Review on Facebook" border="none"></a></li>
<li><a href="https://plus.google.com/102175306984563852786" rel="publisher" title="+1 our page on Google+" target="_blank"><img src="images/google-plus.svg" width="25%" alt="Recommend our literary journal 3Elements Review on Google+" border="none"></a></li>
<li><a href="http://www.stumbleupon.com/stumbler/3elementsreview" title="Come say hello!" target="_blank"><img src="images/stumble.svg" width="25%" alt="If you like our literary journal, you can find our 3Elements Review page on StumbleUpon" border="none"></a></li>
</ul>
</div><!---------------SOCIAL LINKS CONTAINER  END-------------------->

<h1 class="site-design">&nbsp;&nbsp;&nbsp;&copy;&nbsp;<script type="text/javascript">
    var dteNow = new Date();
    var intYear = dteNow.getFullYear();
    document.write(intYear);
</script> 3Elements Literary Review, Chicago, IL&nbsp;&nbsp;<a href="http://www.marlonfowler.com" target="_blank">Site design by Marlon Fowler</a></h1>

</section>
</footer>
</div><!------------------------CONTAINER THAT SURROUNDS ALL CONTENT BELOW THE NAVIGATION BAR  END------------------------------->


$（文档）.ready（函数（）{
$（此）.scrollTop（0）；
});
$（“#导航箭头”）。单击（函数（）{
$（'html，body'）。设置动画({
scrollTop:$（“html”）.offset（）.top
}, 750);
});
HTML:

回到顶端














&抄袭；
var dteNow=新日期（）；
var intYear=dteNow.getFullYear（）；
文件编写（年）；
3元素文学评论，伊利诺伊州芝加哥

为什么不直接将

滚动顶部

切换到

$("#nav-arrow").click(function() {
    $('html, body').animate({scrollTop: 0}, 750);
});

您的代码中有两个原因：

$(document).ready(function(){
    $(this).scrollTop(0);
});

为什么您有4次

文档。准备好了吗？
您的示例有效，您只需要确保jQuery已加载。下面是加载jquery的示例，从JSFIDLE中左上角的下拉列表中完成
它在上面工作得很好。为什么你必须设置scrollTop:$（“html”）.offset（）.top
是scrollTop:0
不够好？我在我的头标签中加载了来自Google CDN的JQuery，但由于某种原因，这个函数无法工作，尽管它在另一个站点中的编写方式相同，右下到div标记。不要在head标记中加载javascript，而是尝试在页面底部附近的closed body标记之前加载它；使用jquery时，请确保您是在任何其他依赖于jquery的插件之前请求它的，这些插件也应该在底部请求。只需从单独的js文件中取出小脚本并将其放回我的html中即可，尽管是在页面底部。这太奇怪了，因为我以前没必要这么做，所以我不知道如果不是这样的话会有什么冲突。令人难以置信。