什么可能导致我的scrollTo功能出现问题？
[英]What could be causing an issue with my scrollTo function?
问题描述
I have a button that resides at the bottom of my page that is supposed to scroll to the top of the page when clicked. 
我有一个位于页面底部的按钮，该按钮应该在单击时滚动到页面顶部。
I used identical code from another site that I've worked on to implement this feature, but for some reason nothing happens within the current site with the scrollTop feature. 我使用了其他网站中相同的代码来实现此功能，但由于某些原因，当前站点中没有任何事情发生，使用了scrollTop功能。
I've tested the effect with another element on the page and it works if I set the 'button' as a different div, but when I revert it back to the div I want to be able to click from, again the feature no longer works. 我已经使用页面上的另一个元素测试了效果，如果我将“按钮”设置为不同的div，它可以正常工作，但是当我将其恢复为我希望能够点击的div时，再次不再使用该功能作品。
Here is my code if anyone might be able to tell what is wrong. 这是我的代码，如果有人可能能够分辨出什么是错的。
Here is a fiddle of the actual page http://jsfiddle.net/6p6MZ/4/ 这是实际页面http://jsfiddle.net/6p6MZ/4/的小提琴
What I have in my head tag: 我头上的标签：
<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: 脚本：
<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"> © <script type="text/javascript">
var dteNow = new Date();
var intYear = dteNow.getFullYear();
document.write(intYear);
</script> 3Elements Literary Review, Chicago, IL <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------------------------------->
2 个解决方案
解决方案1
1 2013-12-05 01:31:21
Why not simply scrollTop to 0 ? 为什么不简单地scrollTop到0 ？
$("#nav-arrow").click(function() {
$('html, body').animate({scrollTop: 0}, 750);
});
Any why in your code you have twice: 您的代码中有两次原因：
$(document).ready(function(){
$(this).scrollTop(0);
});
? ？
Why you have 4 times document.ready at all? 为什么你有4次document.ready ？
解决方案2
1 已采纳 2013-12-05 01:55:34
Your example works, you just need to make sure jQuery is loaded. 您的示例有效，您只需要确保加载jQuery。 Here is your example with jquery loaded, done from the top left dropdown in jsfiddle. 这是你加载jquery的例子，从jsfiddle的左上角下拉列表完成。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.