JavaScript自动类型编写器函数

我为这个网站创建的自动打字功能有问题。一切都很好，但当它完成我的单词数组时，它会将页面向上移动，然后当它再次开始时，它会将页面向下移动。我希望页面在完成单词数组和启动单词数组时都保持原位

var messages=[“你的话语是我脚下的一盏灯，是我前进道路上的一盏灯。”，，，“安静下来，知道我是上帝！我将在列国中被尊崇，我将在地上被尊崇！”，“灰之美”；
var秩=0；
//Chrome、Safari和Opera的代码
document.getElementById（“myTypewriter”）.addEventListener（“webkitAnimationEnd”，changeTxt）；
//标准语法
document.getElementById（“myTypewriter”）.addEventListener（“animationend”，changeTxt）；
函数更改TXT（e）{
_h1=这个.getElementsByTagName（“h1”）[0]；
_h1.style.webkitAnimation='none'；//将元素动画设置为none
setTimeout（function（）{//在下一条消息出现之前，您肯定需要一个延迟
_h1.innerHTML=消息[排名]；
var speed=2.8*messages[rank].length/20；//调整速度（3.5为原始速度，20为原始字符串长度
_h1.style.webkitAnimation='键入'+速度+'的步数（40，结束），闪烁插入符号.75s步数结束无限'；//切换到原始动画集
（rank==messages.length-1）？rank=0:rank++；//如果显示了数组中的最后一条消息，请返回到第一条消息，否则请转到下一条消息
}, 1000);
}

正文{
保证金：0；
填充：0；
背景颜色：紫色；
}
.cf：之前，
.cf：之后{
内容：“；
显示：表格；
}
.cf：之后{
明确：两者皆有；
}
/*-------------标题/导航----------*/
标题{
宽度：100%；
}
#开始{
宽度：90%；
保证金：0自动；
文本对齐：居中；
}
#开始h1{
颜色：白色；
字母间距：6px；
字号：3em；
字体系列：“安东”，无衬线；
}
导航ul{
列表样式类型：无；
填充：0；
左边缘：32%；
}
导航a{
浮动：左；
字体大小：1.2米；
右边距：38px；
}
#包装纸{
宽度：100%；
保证金：0自动；
背景色：紫红色；
颜色：白色；
}
#导航{
宽度：80%；
保证金：0自动；
}
第N个孩子{
右边距：0；
}
/**************打字机***********/
.我的打字机h1{
溢出：隐藏；/*确保在播放动画之前不会显示内容*/
右边框：.15em实心橙色；/*打字机光标*/
空白：nowrap；/*将内容保留在一行上*/
边距：0自动；/*在键入时提供滚动效果*/
字母间距：.15em；
/*根据需要进行调整*/
动画：
键入3.5s步骤（40，结束），
闪烁插入符号。75秒步结束无限；
}
#包装二{
背景：紫色；
颜色：#fff；
字体系列：monospace；
垫面：3em；
显示器：flex；
证明内容：中心；
}
@关键帧键入{
从{宽度：0}
到{宽度：100%}
}
/*打字机光标效应*/
@关键帧闪烁插入符号{
从，到{边框颜色：透明}
50%{边框颜色：蓝色；}
}
/*--------------第二节---------------*/
#包装家{
宽度：90%；
保证金：0自动；
显示：-webkit flex；
显示器：flex；
弯曲方向：行；
对齐项目：拉伸；
}
氢{
浮动：左；
}
img{
浮动：左；
}
/*----------------媒体查询-----------*/
@仅介质屏幕和（最大宽度：1200px）{
导航ul{
剩余利润：20%
}
}

家
只有

家
关于我们
事件
鼓励
联系我们

灰烬之美
欢迎

我对你的CSS做了一个小改动来解决这个问题。希望对你有所帮助

.myTypewriter h1 {
  overflow: hidden; 
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em;

  // Set minimum height of auto-typewriter to hold it's place even when empty. 
  min-height: 25px;


   /* Adjust as needed */
  animation: 

  typing 3.5s steps(40, end),
  blink-caret .75s step-end infinite;
}