我正在建立一个Tumblr主题,我在回到顶部按钮时遇到了一些麻烦。它似乎适用于Chrome和Firefox以及较新版本的Safari,但在我的Safari版本(7.0.5)上,该链接可以将链接指向顶部,但动画滚动无法正常工作。包括它有助于我也使用jquery版本1.10.1。
我尝试了各种各样的但却看不出我出错的地方。我认为可能会有一些与之相冲突的东西,但我并不是百分百肯定。
下面是我正在使用的代码,如果检查有帮助,这里是主题的链接。
http://minori-theme.tumblr.com
非常感谢任何建议或帮助。
HTML
<body>
<a name="top"> </a>
<div class="wrapper">
Main Content here
</div>
<a href="#top">Back to Top</a>
</body>
JS
<script>
$(document).ready(function() {
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
$("a").click(function() {
var href = $(this).attr('href').replace('#', '')
scrollToAnchor(href);
});
});
</script>
答案 0 :(得分:1)
您可以尝试阻止锚标记的默认行为:
<script>
$(document).ready(function() {
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
$("a").click(function(e) {
//Add the e parameter to get the event object and call preventDefault.
e.preventDefault();
var href = $(this).attr('href').replace('#', '')
scrollToAnchor(href);
});
});
</script>
答案 1 :(得分:0)
原来防止默认建议打破了页面上的所有链接以及我没有意识到我有一个高度:100%的身体和html阻止了回到顶部按钮的工作。删除后,返回顶部工作。