javascript - jquery 中的 onload 函数无法刷新

标签 javascript jquery html css onload

我是 jquery 的新手。我有一个简单的元素。两张图片叠在一起。我希望页面首先显示第二张图片(因此页面需要从某个滚动点开始),然后用户可以向上滚动到第一张图片。所以代码会像那样

html:

!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script type="text/javascript" src="jquery.js"></script>
</head>   
<body>
        <div id="mainPage" width="100%">
            <img  id="top" src="pic1.jpg" width="100%">
            <img  id="bottom" src="pic2.jpg" width="100%">
        </div>
</body>
    <script type="text/javascript" src="script.js"></script>
</html>

CSS:

body {
    margin: 0px;
    padding: 0px;
}

#top {
  display: block; 
}

#bottom {
  display: block; 
}

JavaScript

window.onload = function() {
 scroll(0, 2300);
}

这在我第一次加载页面时有效,但如果我刷新页面则无效(我假设是因为与缓存有关?)。刷新页面时,如何使 onload 功能也起作用?感谢您的宝贵时间。

最佳答案

如果您使用 jq你为什么不在 $(document).ready() 上使用这种类型的功能呢?

$(document).ready(function(){
  $(window).scrollTop( 3000 );
});
$(window).unload(function(){
  $(window).scrollTop( 3000 );
})
body {
  margin: 0px;
  padding: 0px;
}
#top {
  display: block;
}
#bottom {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mainPage" width="100%">
  <img id="top" src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" width="100%">
  <img id="bottom" src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" width="100%">
</div>

关于javascript - jquery 中的 onload 函数无法刷新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40340116/

相关文章:

javascript - 甚至基本的 javascript 都无法正常工作 [noob here]

javascript - 使用 Ajax post 调用的 php 脚本可以在脚本执行时发回 SSE 事件吗

javascript - 在可编辑内容的表行上按 ENTER 单击调用 jQuery focusout

javascript - 即使填写并检查了所有字段后,表单也不会提交

html - 使用 SVG 图像的最佳实践?

php - 使用ajax加载表单并使用jQuery提交

javascript - 使用 anchor 标签平滑滚动时左右轮播控件不起作用

javascript - 使用css将标题分成jquery中的列

Jquery Accordion - 使用 anchor 从外部和内部链接打开特定面板

html - 在 <p> 中将长文本分成多行