HTML/JavaScript，如何将页面滚动到某个标记值？

我有一个HTML页面，上面有100多个HTML5音频标签，如下所示：

<audio controls=""> <source src="NameOfFile.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</source></audio>

<audio controls=""> <source src="NameOfFile2.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</source></audio>

<audio controls=""> <source src="NameOfFile3.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</source></audio>

...

---

但是像上面提到的“源scr”值呢？真的不懂HTML，我主要使用powershell脚本。非常感谢。

感谢@Mr Lister的评论

只需为每个标记添加一个ID，例如：

<audio id="Test" controls="">
<source src="Test.mp3" type="audio/mpeg">Your browser does
not support the audio element.
</source></audio>

---

这当然是可能的，但是，您仍然需要将按钮/锚定标签链接到每个

音频

元素，这样您就知道当您单击

AudioFileX

时，它将滚动到适当的位置

在下面的示例中，我使用了

data-*

属性，这些属性保存与每个

audio

元素的

src

属性相关的值

window.addEventListener（'load'，handleAudioAnchorClicks）
函数handleAudioAnchorClicks（）{
const allButtons=document.queryselectoral（'button'））
const allAudioElements=[].slice.call（document.querySelectorAll（'audio'））
for（设i=0；i{
const source=el.querySelector（'source'）.getAttribute（'src'））
返回源。包括（audioId）
})
const audioElement rect=audioElement.getBoundingClientRect（）
常量scrollToPosition=audioElementRect.top
scrollTo（0，scrollToPosition）
}
}

div{
边框：1px纯黑；
填充物：5px；
保证金：5px0；
高度：250px；
}

NameOfFile
姓名办公室2
姓名办公室3

NameOfFile.mp3

您的浏览器不支持音频元素。
NameOfFile2.mp3

您的浏览器不支持音频元素。
NameOfFile3.mp3

您的浏览器不支持音频元素。

java标记用于什么？只需给元素ID。@MisterJojo java标记用于防止javascript比HTML做得更好。@MrLister所以没有ID是不可能的，对吗？我希望不必向近200个源元素添加ID，但我想这可以吗？我看不出这个挑衅的意义真的很好的回答，我会根据我的页面调整它，非常感谢。@Rakha如果您想动态地将

数据-*

属性分配给每个按钮/锚，如果按钮/锚与

音频

元素的顺序相同，请参见编辑。请注意，此示例使用

测试

作为id，使用

测试

作为链接，这两种方法不同。

<audio id="Test" controls="">
<source src="Test.mp3" type="audio/mpeg">Your browser does
not support the audio element.
</source></audio>

<a href="#test">Scroll to Test ID</a>