Javascript 平滑滚动顶部

我有一个脚本，当用户滚动页面时，它会使页眉向上滚动一点，并且工作正常。但是，我想让它平滑地滚动。我试着自己做，但我不太擅长java脚本

<script>
window.onscroll=function () {
    var top = window.pageXOffset ? window.pageXOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
    if(top > 50){document.getElementById("header").style.position = "fixed";
    document.getElementById("header").style.height="130px"
        }
        else {
        document.getElementById("header").style.position = "relative";
    document.getElementById("header").style.height="373px"
        }
}
</script>

window.onscroll=函数（）{
var top=window.pageXOffset？window.pageXOffset:document.documentElement.scrollTop？document.documentElement.scrollTop:document.body.scrollTop；
if（top>50）{document.getElementById（“header”）.style.position=“fixed”；
document.getElementById（“header”）.style.height=“130px”
}
否则{
document.getElementById（“header”）.style.position=“relative”；
document.getElementById（“header”）.style.height=“373px”
}
}

以下是一个例子：

感谢您的帮助。

---

谢谢

首先，我会对这两种情况使用固定的定位。 接下来我要做的是使用“开关”而不是“如果”：

switch (top)
    {
        case 0:
            header.style.height="230px;
            break;
        case 1:
            header.style.height="228px";
            break;
        case 2:
            header.style.height="226px";
            break;
        case 3:
            header.style.height="224px";
            break;
        case 4:
            header.style.height="222px";
            break;
        case 5:
            header.style.height="220px";
            break;
        case 6:
            header.style.height="218px";
            break;
        case 7:
            header.style.height="216px";
            break;
        case 8:
            header.style.height="214px";
            break;
        case 9:
            header.style.height="212px";
            break;
        case 10:
            header.style.height="210px";
            break;
        case 11:
            header.style.height="208px";
            break;
        case 12:
            header.style.height="206px";
            break;
        case 13:
            header.style.height="204px";
            break;
        case 14:
            header.style.height="202px";
            break;
        case 15:
            header.style.height="200px";
            break;
        case 16:
            header.style.height="198px";
            break;
        case 17:
            header.style.height="196px";
            break;
        case 18:
            header.style.height="194px";
            break;
        case 19:
            header.style.height="192px";
            break;
        case 20:
            header.style.height="190px";
            break;
        default:
            header.style.height="130px";
            break;
    }

你可以看到，为了让我更容易写，我把结尾高度改为130像素，这样你每滚动一次“1个顶部”，标题就会缩短2个像素。

---

我没有时间，所以我没有完成代码，也没有检查代码，但是当您编写代码并进行调整时，您应该有49个案例，我只写了20个。

我建议您从一开始就使用

位置：fixed

。浏览器已经在为您进行一系列滚动计算，因此您肯定希望利用这一点。诀窍是根据滚动的位置平滑地移动元素。我正在使用

margintop

来定位内容，并使用

height

来定位标题。我还清理了您的标记，以便更好地利用浏览器已经可以做的事情。请注意，我正在分别移动标题和内容，his所做的是以更自然和直观的方式移动标题

加成 JS

window.onscroll=函数（）{
var doc=document.documentElement，
body=document.body，
top=（doc&&doc.scrollTop||
body&&body.scrollTop||
0);
如果（顶部<75）{
文件
.getElementById（'header'）
风格
.高度=（203-顶部*2）+“px”；
}
如果（顶部<130）{
文件
.getElementById（'content'）
风格
.marginTop=（203-顶部）+“px”；
}
}

---

一把js小提琴会为这次任务带来奇迹！！！这是：……这是什么？！我只是想说：

230-（top*2）

这很简单：

header.style.height=（230-top*2）+“px”。您可能还想在其中抛出一个
Math.max
来限制它。如果这些东西看起来很复杂，我强烈建议在开始你自己的项目之前遵循一些初学者指南。我怎么会错过它呢？hahaI在JSFIDLE中检查了你的代码，但由于某些原因，它不起作用。我唯一能想到的是，我确实去掉了你内容中人为的
高度。如果视口宽度太大，我可以看到您没有看到效果
<div class="container">
  <div id="header"> 
    header
  </div>
  <div id="content">
    <p>...</p>
  </div>
</div>

.container {
  width: 100%;
  background-color: gray;
}    
#header {
  position: fixed;
  text-align: center;
  background: #880000;
  height: 203px;
  width: 100%;
  top: 0;
  left: 0;
}
#content {
  margin-top: 203px;
  margin-left: auto ;
  margin-right: auto ;
}

window.onscroll = function () {
  var doc = document.documentElement,
      body = document.body,
      top = (doc && doc.scrollTop  ||
        body && body.scrollTop  ||
        0);
  if(top < 75) {
    document
      .getElementById('header')
      .style
      .height = (203 - top * 2) + "px";
  }
  if(top < 130) {
    document
      .getElementById('content')
      .style
      .marginTop = (203 - top) + "px";
  }
}