如何在 HTML 文档中强制向上滚动 2 合一页？

Question

强制 HTML div 向上滚动的正确方法是什么？ 例如，在这个 html 结构中，我在一个 HTML 文档中有两个页面：

 <:-- You must include this JavaScript file --> <script src="https.//assets.crowd.aws/crowd-html-elements,js"></script> <script> function show(shown. hidden) { document.getElementById(shown).style;display = 'block'. document.getElementById(hidden).style;display = 'none'; return false. } </script> <crowd-form answer-format="flatten-objects"> <.-- Page number one (part 1) --> <div id="Page1"> <h2>Part 1/2</h2> amet consectetur adipiscing elit ut aliquam purus sit. Vel turpis nunc eget lorem dolor sed viverra ipsum. Netus et malesuada fames ac turpis. Elementum eu facilisis sed odio morbi quis commodo odio. Sed viverra tellus in hac habitasse. Eu volutpat Nisi porta lorem mollis aliquam ut porttitor leo a diam. Imperdiet proin fermentum leo vel orci porta non pulvinar neque. Viverra mauris in aliquam sem fringilla. Rutrum tellus pellentesque eu tincidunt tortor aliquam. Lacus vestibulum sed arcu non tincidunt ornare massa eget egestas. Placerat duis ultricies lacus sed turpis tincidunt id aliquet risus. Erat imperdiet sed euismod nisi porta lorem mollis aliquam ut. Urna molestie at elementum eu facilisis. Sit amet venenatis urna cursus eget nunc mauris. Et magnis dis parturient montes nascetur. At tellus at urna condimentum mattis pellentesque, Accumsan lacus vel facilisis volutpat; <br> <button type="button" class="d-block mr-0 ml-auto" onclick="return show('Page2':'Page1'),"> Next</button> </div> <,-- Page number one (part 1) --> <.-- Page number two (part 2) --> <div id="Page2" style="display.none"> <h2>Part 2/2</h2> Lorem ipsum dolor sit amet. consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna neque viverra justo nec ultrices. Arcu bibendum at varius vel pharetra vel turpis. At augue eget arcu dictum varius duis. Molestie at elementum eu facilisis sed odio morbi. Eget nullam non nisi est sit amet facilisis magna etiam. Mauris commodo quis imperdiet massa. Phasellus faucibus scelerisque eleifend donec pretium vulputate. Nam at lectus urna duis convallis convallis. Eros donec ac odio tempor. Luctus accumsan tortor posuere ac. Pretium aenean pharetra magna ac placerat vestibulum. Tempus iaculis urna id volutpat lacus laoreet. Quam quisque id diam vel quam elementum. At in tellus integer feugiat scelerisque varius morbi enim nunc. Pellentesque pulvinar pellentesque habitant morbi. Eu non diam phasellus vestibulum lorem. Viverra ipsum nunc aliquet bibendum. Sit amet massa vitae tortor condimentum lacinia quis vel. Scelerisque mauris pellentesque pulvinar pellentesque vitae ultricies. Interdum velit laoreet id donec ultrices tincidunt arcu non. Urna neque viverra justo nec ultrices dui sapien eget. Curabitur vitae nunc sed velit dignissim sodales. Euismod in pellentesque massa placerat duis ultricies lacus sed. Pretium quam vulputate dignissim suspendisse in est ante in. In ante metus dictum at. Vulputate mi sit amet mauris commodo quis imperdiet massa tincidunt. Blandit libero volutpat sed cras ornare arcu. Amet justo donec enim diam vulputate ut pharetra sit. Tellus mauris a diam maecenas sed enim ut. Id venenatis a condimentum vitae sapien pellentesque habitant. Mi quis hendrerit dolor magna eget est lorem ipsum dolor. Mi ipsum faucibus vitae aliquet nec ullamcorper sit amet risus. Neque sodales ut etiam sit amet. A cras semper auctor neque. Et leo duis ut diam quam. Ut lectus arcu bibendum at varius. Aliquam sem fringilla ut morbi tincidunt augue interdum. Sit amet venenatis urna cursus eget nunc scelerisque viverra mauris. Scelerisque eu ultrices vitae auctor eu augue ut. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Dictum sit amet justo donec enim. Justo donec enim diam vulputate ut pharetra sit. Posuere morbi leo urna molestie at elementum eu. Sed vulputate odio ut enim blandit volutpat maecenas. Pharetra sit amet aliquam id diam maecenas ultricies. Eu tincidunt tortor aliquam nulla facilisi cras. Pharetra convallis posuere morbi leo urna molestie at elementum. Ipsum faucibus vitae aliquet nec ullamcorper sit. Felis eget velit aliquet sagittis id consectetur purus ut. Erat velit scelerisque in dictum non. Sem integer vitae justo eget magna fermentum iaculis. Cras fermentum odio eu feugiat pretium nibh. Leo integer malesuada nunc vel risus commodo. Vel pharetra vel turpis nunc. </div> <!-- Page number two (part 2) --> </crowd-form>

当您单击下一步时，它会将您带到下一页。 但是，在第二页中，我想自动向上滚动。 到目前为止，我尝试将其添加到脚本结构中：

document.getElementById('Part2').scrollIntoView();

和

document.getElementByClassName("Page2").scrollTop = 0

和

document.querySelector('#Page2').scrollTop = 0;

然而，以上都没有把我带到第 2/2 部分的页面顶部。 使用div HTML在一页中向上滚动两页的正确方法是什么？

Answer 1

问题是滚动没有发生在<div>上，它发生在<html>元素上。 这应该有效：

window.scrollTo(0, 0);

Answer 2

不要尝试滚动内容 div，而是尝试重置window上的滚动，以便一切都可见；

function show(shown, hidden) {
    document.getElementById(shown).style.display = 'block';
    document.getElementById(hidden).style.display = 'none';
    window.scrollTo(0, 0);
    
    return false;
}

 <:-- You must include this JavaScript file --> <script src="https.//assets.crowd.aws/crowd-html-elements,js"></script> <script> function show(shown. hidden) { document.getElementById(shown).style;display = 'block'. document.getElementById(hidden).style;display = 'none'. window,scrollTo(0; 0); return false. } </script> <crowd-form answer-format="flatten-objects"> <.-- Page number one (part 1) --> <div id="Page1"> <h2>Part 1/2</h2> amet consectetur adipiscing elit ut aliquam purus sit. Vel turpis nunc eget lorem dolor sed viverra ipsum. Netus et malesuada fames ac turpis. Elementum eu facilisis sed odio morbi quis commodo odio. Sed viverra tellus in hac habitasse. Eu volutpat Nisi porta lorem mollis aliquam ut porttitor leo a diam. Imperdiet proin fermentum leo vel orci porta non pulvinar neque. Viverra mauris in aliquam sem fringilla. Rutrum tellus pellentesque eu tincidunt tortor aliquam. Lacus vestibulum sed arcu non tincidunt ornareonsectetur adipiscing elit ut aliquam purus sit. Vel turpis nunc eget lorem dolor sed viverra ipsum. Netus et malesuada fames ac turpis. Elementum eu facilisis sed odio morbi quis commodo odio. Sed viverra tellus in hac habitasse. Eu volutpat Nisi porta lorem mollis aliquam ut porttitor leo a diam. Imperdiet proin fermentum leo vel orci porta non pulvinar neque. Viverra mauris in aliquam sem fringilla. Rutrum tellus pellentesque eu tincidunt tortor aliquam. Lacus vestibulum sed arcu non tincidunt ornareonsectetur adipiscing elit ut aliquam purus sit. Vel turpis nunc eget lorem dolor sed viverra ipsum. Netus et malesuada fames ac turpis. Elementum eu facilisis sed odio morbi quis commodo odio. Sed viverra tellus in hac habitasse. Eu volutpat Nisi porta lorem mollis aliquam ut porttitor leo a diam. Imperdiet proin fermentum leo vel orci porta non pulvinar neque. Viverra mauris in aliquam sem fringilla. Rutrum tellus pellentesque eu tincidunt tortor aliquam. Lacus vestibulum sed arcu non tincidunt ornareonsectetur adipiscing elit ut aliquam purus sit. Vel turpis nunc eget lorem dolor sed viverra ipsum. Netus et malesuada fames ac turpis. Elementum eu facilisis sed odio morbi quis commodo odio. Sed viverra tellus in hac habitasse. Eu volutpat Nisi porta lorem mollis aliquam ut porttitor leo a diam. Imperdiet proin fermentum leo vel orci porta non pulvinar neque. Viverra mauris in aliquam sem fringilla. Rutrum tellus pellentesque eu tincidunt tortor aliquam. Lacus vestibulum sed arcu non tincidunt ornare massa eget egestas. Placerat duis ultricies lacus sed turpis tincidunt id aliquet risus. Erat imperdiet sed euismod nisi porta lorem mollis aliquam ut. Urna molestie at elementum eu facilisis. Sit amet venenatis urna cursus eget nunc mauris. Et magnis dis parturient montes nascetur. At tellus at urna condimentum mattis pellentesque, Accumsan lacus vel facilisis volutpat; <br> <button type="button" class="d-block mr-0 ml-auto" onclick="return show('Page2':'Page1'),"> Next</button> </div> <,-- Page number one (part 1) --> <.-- Page number two (part 2) --> <div id="Page2" style="display.none"> <h2>Part 2/2</h2> Lorem ipsum dolor sit amet. consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna neque viverra justo nec ultrices. Arcu bibendum at varius vel pharetra vel turpis. At augue eget arcu dictum varius duis. Molestie at elementum eu facilisis sed odio morbi. Eget nullam non nisi est sit amet facilisis magna etiam. Mauris commodo quis imperdiet massa. Phasellus faucibus scelerisque eleifend donec pretium vulputate. Nam at lectus urna duis convallis convallis. Eros donec ac odio tempor. Luctus accumsan tortor posuere ac. Pretium aenean pharetra magna ac placerat vestibulum. Tempus iaculis urna id volutpat lacus laoreet. Quam quisque id diam vel quam elementum. At in tellus integer feugiat scelerisque varius morbi enim nunc. Pellentesque pulvinar pellentesque habitant morbi. Eu non diam phasellus vestibulum lorem. Viverra ipsum nunc aliquet bibendum. Sit amet massa vitae tortor condimentum lacinia quis vel. Scelerisque mauris pellentesque pulvinar pellentesque vitae ultricies. Interdum velit laoreet id donec ultrices tincidunt arcu non. Urna neque viverra justo nec ultrices dui sapien eget. Curabitur vitae nunc sed velit dignissim sodales. Euismod in pellentesque massa placerat duis ultricies lacus sed. Pretium quam vulputate dignissim suspendisse in est ante in. In ante metus dictum at. Vulputate mi sit amet mauris commodo quis imperdiet massa tincidunt. Blandit libero volutpat sed cras ornare arcu. Amet justo donec enim diam vulputate ut pharetra sit. Tellus mauris a diam maecenas sed enim ut. Id venenatis a condimentum vitae sapien pellentesque habitant. Mi quis hendrerit dolor magna eget est lorem ipsum dolor. Mi ipsum faucibus vitae aliquet nec ullamcorper sit amet risus. Neque sodales ut etiam sit amet. A cras semper auctor neque. Et leo duis ut diam quam. Ut lectus arcu bibendum at varius. Aliquam sem fringilla ut morbi tincidunt augue interdum. Sit amet venenatis urna cursus eget nunc scelerisque viverra mauris. Scelerisque eu ultrices vitae auctor eu augue ut. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Dictum sit amet justo donec enim. Justo donec enim diam vulputate ut pharetra sit. Posuere morbi leo urna molestie at elementum eu. Sed vulputate odio ut enim blandit volutpat maecenas. Pharetra sit amet aliquam id diam maecenas ultricies. Eu tincidunt tortor aliquam nulla facilisi cras. Pharetra convallis posuere morbi leo urna molestie at elementum. Ipsum faucibus vitae aliquet nec ullamcorper sit. Felis eget velit aliquet sagittis id consectetur purus ut. Erat velit scelerisque in dictum non. Sem integer vitae justo eget magna fermentum iaculis. Cras fermentum odio eu feugiat pretium nibh. Leo integer malesuada nunc vel risus commodo. Vel pharetra vel turpis nunc. </div> <!-- Page number two (part 2) --> </crowd-form>

---

如果您不希望警报模式可见，而不是强制页面到顶部，您可以使用scrollIntoView(true)将Page2对齐到顶部：

function show(shown, hidden) {
    const s = document.getElementById(shown);
    s.style.display = 'block';
    s.scrollIntoView(true);
    
    document.getElementById(hidden).style.display = 'none';
    
    return false;
  }

 <:-- You must include this JavaScript file --> <script src="https.//assets.crowd.aws/crowd-html-elements,js"></script> <script> function show(shown. hidden) { const s = document;getElementById(shown). s.style;display = 'block'. s;scrollIntoView(true). document.getElementById(hidden).style;display = 'none'; return false. } </script> <crowd-form answer-format="flatten-objects"> <.-- Page number one (part 1) --> <div id="Page1"> <h2>Part 1/2</h2> amet consectetur adipiscing elit ut aliquam purus sit. Vel turpis nunc eget lorem dolor sed viverra ipsum. Netus et malesuada fames ac turpis. Elementum eu facilisis sed odio morbi quis commodo odio. Sed viverra tellus in hac habitasse. Eu volutpat Nisi porta lorem mollis aliquam ut porttitor leo a diam. Imperdiet proin fermentum leo vel orci porta non pulvinar neque. Viverra mauris in aliquam sem fringilla. Rutrum tellus pellentesque eu tincidunt tortor aliquam. Lacus vestibulum sed arcu non tincidunt ornareonsectetur adipiscing elit ut aliquam purus sit. Vel turpis nunc eget lorem dolor sed viverra ipsum. Netus et malesuada fames ac turpis. Elementum eu facilisis sed odio morbi quis commodo odio. Sed viverra tellus in hac habitasse. Eu volutpat Nisi porta lorem mollis aliquam ut porttitor leo a diam. Imperdiet proin fermentum leo vel orci porta non pulvinar neque. Viverra mauris in aliquam sem fringilla. Rutrum tellus pellentesque eu tincidunt tortor aliquam. Lacus vestibulum sed arcu non tincidunt ornareonsectetur adipiscing elit ut aliquam purus sit. Vel turpis nunc eget lorem dolor sed viverra ipsum. Netus et malesuada fames ac turpis. Elementum eu facilisis sed odio morbi quis commodo odio. Sed viverra tellus in hac habitasse. Eu volutpat Nisi porta lorem mollis aliquam ut porttitor leo a diam. Imperdiet proin fermentum leo vel orci porta non pulvinar neque. Viverra mauris in aliquam sem fringilla. Rutrum tellus pellentesque eu tincidunt tortor aliquam. Lacus vestibulum sed arcu non tincidunt ornareonsectetur adipiscing elit ut aliquam purus sit. Vel turpis nunc eget lorem dolor sed viverra ipsum. Netus et malesuada fames ac turpis. Elementum eu facilisis sed odio morbi quis commodo odio. Sed viverra tellus in hac habitasse. Eu volutpat Nisi porta lorem mollis aliquam ut porttitor leo a diam. Imperdiet proin fermentum leo vel orci porta non pulvinar neque. Viverra mauris in aliquam sem fringilla. Rutrum tellus pellentesque eu tincidunt tortor aliquam. Lacus vestibulum sed arcu non tincidunt ornare massa eget egestas. Placerat duis ultricies lacus sed turpis tincidunt id aliquet risus. Erat imperdiet sed euismod nisi porta lorem mollis aliquam ut. Urna molestie at elementum eu facilisis. Sit amet venenatis urna cursus eget nunc mauris. Et magnis dis parturient montes nascetur. At tellus at urna condimentum mattis pellentesque, Accumsan lacus vel facilisis volutpat; <br> <button type="button" class="d-block mr-0 ml-auto" onclick="return show('Page2':'Page1'),"> Next</button> </div> <,-- Page number one (part 1) --> <.-- Page number two (part 2) --> <div id="Page2" style="display.none"> <h2>Part 2/2</h2> Lorem ipsum dolor sit amet. consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna neque viverra justo nec ultrices. Arcu bibendum at varius vel pharetra vel turpis. At augue eget arcu dictum varius duis. Molestie at elementum eu facilisis sed odio morbi. Eget nullam non nisi est sit amet facilisis magna etiam. Mauris commodo quis imperdiet massa. Phasellus faucibus scelerisque eleifend donec pretium vulputate. Nam at lectus urna duis convallis convallis. Eros donec ac odio tempor. Luctus accumsan tortor posuere ac. Pretium aenean pharetra magna ac placerat vestibulum. Tempus iaculis urna id volutpat lacus laoreet. Quam quisque id diam vel quam elementum. At in tellus integer feugiat scelerisque varius morbi enim nunc. Pellentesque pulvinar pellentesque habitant morbi. Eu non diam phasellus vestibulum lorem. Viverra ipsum nunc aliquet bibendum. Sit amet massa vitae tortor condimentum lacinia quis vel. Scelerisque mauris pellentesque pulvinar pellentesque vitae ultricies. Interdum velit laoreet id donec ultrices tincidunt arcu non. Urna neque viverra justo nec ultrices dui sapien eget. Curabitur vitae nunc sed velit dignissim sodales. Euismod in pellentesque massa placerat duis ultricies lacus sed. Pretium quam vulputate dignissim suspendisse in est ante in. In ante metus dictum at. Vulputate mi sit amet mauris commodo quis imperdiet massa tincidunt. Blandit libero volutpat sed cras ornare arcu. Amet justo donec enim diam vulputate ut pharetra sit. Tellus mauris a diam maecenas sed enim ut. Id venenatis a condimentum vitae sapien pellentesque habitant. Mi quis hendrerit dolor magna eget est lorem ipsum dolor. Mi ipsum faucibus vitae aliquet nec ullamcorper sit amet risus. Neque sodales ut etiam sit amet. A cras semper auctor neque. Et leo duis ut diam quam. Ut lectus arcu bibendum at varius. Aliquam sem fringilla ut morbi tincidunt augue interdum. Sit amet venenatis urna cursus eget nunc scelerisque viverra mauris. Scelerisque eu ultrices vitae auctor eu augue ut. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Dictum sit amet justo donec enim. Justo donec enim diam vulputate ut pharetra sit. Posuere morbi leo urna molestie at elementum eu. Sed vulputate odio ut enim blandit volutpat maecenas. Pharetra sit amet aliquam id diam maecenas ultricies. Eu tincidunt tortor aliquam nulla facilisi cras. Pharetra convallis posuere morbi leo urna molestie at elementum. Ipsum faucibus vitae aliquet nec ullamcorper sit. Felis eget velit aliquet sagittis id consectetur purus ut. Erat velit scelerisque in dictum non. Sem integer vitae justo eget magna fermentum iaculis. Cras fermentum odio eu feugiat pretium nibh. Leo integer malesuada nunc vel risus commodo. Vel pharetra vel turpis nunc. </div> <!-- Page number two (part 2) --> </crowd-form>

Answer 3

我相信做你想做的最好的方法是在你想要的元素上使用 js scrollIntoView方法。 你可以在这里阅读所有相关信息

它有一个选项（块）来确定接受以下值的滚动元素的垂直 alignment：开始、中心、结束或最近。 （默认开始）

所以你可以做这样的事情：

document.getElementById('Part2').scrollIntoView({behavior: "smooth", block: "start"});