Question

我正在开发一个网页，其中我使用带有两个功能的箭头按钮 - 滚动到顶部并吸引访客的注意力。

按钮有两种状态：

↑ - 使用在用户滚动时激活的onclick事件$('html, body').animate({scrollTop: 0}, 'fast')转到顶部。

↓ - 注意吸引人（页面加载时的默认状态） - 当$(window).scrollTop() == 0和用户没有滚动时弹出动画。

但是当我重新加载页面中间时，所有行为都出错了，箭头按钮以奇怪的方式对所有事件作出反应。我已经尝试了很多解决问题的方法，但没有找到任何功能性解决方案。

简化代码我有： http://jsfiddle.net/rbusa/2m6RL/

你介意告诉我我做错了什么，最后告诉我如何解决这个烦恼吗？对不起代码中的所有混乱，我是JS初学者。

Answer 1

我认为问题是当你重新加载浏览器时会遇到旧的滚动位置。托盘添加此

$(window).on('beforeunload', function(){
    $(window).scrollTop(0);
});

Answer 2

欢迎使用javascript。一些事情..如上所述，页面在重新加载时保持它的位置，因此一些函数正在初始化。此外，您应该养成将js和css保存在适当文件中以便于维护和调试的习惯。我已经重构了你的代码，并认为我现在正如你所期望的那样工作。主要修复是如上所述将页面滚动回顶部，并删除头部箭头上的旋转类，如下所示：

$(window).scrollTop(0);
$('#arrow').removeClass('rotateup rotatedwn');

另外，因为它在加载时执行scrolltop函数，所以我将window.scroll的超时添加到resetArrow函数的底部，这样就不会在init上调用它们，这会导致状态混乱。

在这里摆弄 - http://jsfiddle.net/ackerman/yqbVu/

JavaScript页面滚动状态

2 个答案: