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

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

很简单。您必须在函数作用域之外定义 varscrolled = 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;
}