Question

我可以使用java脚本轻松地在网页中上下移动。我为此做了一个功能：

function moving() { 
var move=window.pageYOffset;
move=move+950;
$("html, body").animate({scrollTop:  move  },0);
}

然后我有一些照片。所有图片都有相同的高度。我必须向下移动950px。它效果很好，但经过3次后移动的时间超过950px。

我使用alert(move);给我pageYOffset。它告诉我：

950 ... 1900 ... 2850 ... 3800 .. 4750 ... 5700

所以它是950px。但是，我有相同高度的相同图像，它不会与最后一张图片位于同一位置。这样的事情在第三次之后超过950px并且一切都会出错。

更新：

这是我拥有的图像代码：

    <div align="center">
  <table width="1132" border="0">
    <tr>
      <td><img src="images/Look_01.jpg" width="566" height="849" /></td>
      <td><img src="images/Look_01.jpg" width="566" height="849" /></td>
    </tr>
  </table>
</div>
<div align="center"><img src="images/arrow_up.png" width="47" height="58" border="0" usemap="#Map" class="hover" />
  <map name="Map" id="Map">
    <area shape="rect" coords="4,4,44,54" href="#" onclick="up()"/>
  </map>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<img src="images/arrow_down.png" width="47" height="58" border="0" usemap="#Map2" class="hover" />
<map name="Map2" id="Map2">
  <area shape="rect" coords="3,4,45,53" href="#" onclick="move()" />
</map>
</div>
<br/>
<br/>
<br/>
<br/>
<div align="center">
  <table width="1132" border="0">
    <tr>
      <td><img src="images/Look_01.jpg" width="566" height="849" /></td>
      <td><img src="images/Look_01.jpg" width="566" height="849" /></td>
    </tr>
  </table>
</div>

然后它继续相同的图片和相同的高度。但它不会与最后一张图片的情况相同，但每次950px都是如此。

就像一本相册。所有的照片都有相同的高度，所以当我想要下来的时候，我想和最后一张照片一样下去。但它搞砸了。在第三次之后它会下降超过950px并且它会越来越多。

我真的希望你感到不安和我的意思。

请帮助我，以便我能解决这个问题。

提前致谢。

Answer 1

这很简单。您必须在函数范围之外定义var scrolled = window.pageYOffset;。

同样，因为你pageOffsetY的价值因为你的同步而不知所措。因此，每次下车时都需要减去15px。

所以将代码更改为：

var scrolled = window.pageYOffset;
function down(){ 
var scrolled = window.pageYOffset;
scrolled=scrolled+950;
$("html, body").animate({scrollTop:  scrolled  },2500);
scrolled = scrolled - 15;
}

window.pageYOffset在javascript中显示不同的值

1 个答案: