jQuery调用函数时无法将元素定位到视口顶部问题排查

嘿，我一眼就瞅出问题所在啦！你原来的代码之所以没效果，核心原因是CSS的top属性需要带长度单位，而你直接传入了纯数字值。

咱们来拆解下：

• $window.scrollTop()返回的是一个纯数字（比如滚动了300像素，它就返回300），不带任何单位；
• 当你把这个纯数字传给.css("top", ...)时，浏览器会认为这是个无效的CSS值，直接忽略，所以元素不会有任何位置变化；
• 而你改成"100px"能正常运行，是因为这是一个带px单位的合法CSS长度值，浏览器能正确解析。

修正后的代码 #

只需要给数字加上px单位就行，把代码改成这样：

function showSidePage() { 
  var window_top_position = $window.scrollTop(); 
  $('#projectsPage').css("top", window_top_position + "px") 
}

这样修改后，top属性就会被设置成"XXXpx"的合法格式，元素就能准确定位到视口顶部对应的位置啦～

内容的提问来源于stack exchange，提问作者Kryddan