如何 link 使用内部滚动条而不是外部滚动条（主要滚动条）滚动到顶部按钮？
How to link scroll to top button with inner scrollbar instead of the outer (main one)?
所以，我有一个滚动到顶部的按钮，当您向下滚动页面时它会出现，但目前它出现在外部（主体）滚动条移动上。我需要它在移动内部（文章#story）滚动条时出现。这是带有演示的代码和 CodePen。你会如何编写函数，使按钮仅在滚动内部滚动条时出现？
<a class="logo" href="index.html"><h1>LOREMIS</h1></a>
<h2 class="desktop">ABOUT US</h2>
<!-- Menu overlay -->
<div id="overlay">
<nav id="navbar">
<ul class="menu">
<li class="item-group">
<a href="index.html">1</a>
</li>
<li class="item-group">
<a href="everyday-life.html">2</a>
</li>
<li class="item-group">
<a href="yummy.html">3</a>
</li>
<li class="item-group">
<a href="not-just-cuddlies.html">4</a>
</li>
<li class="item-group">
<a href="making-memories.html">5</a>
</li>
<li class="item-group">
<a href="around-the-world.html">6</a>
</li>
<li class="item-group">
<a href="somewhere-over-the-rainbow.html">7</a>
</li>
<li class="item-group">
<a href="talent-show.html">8</a>
</li>
<li class="item-group">
<a href="celebrations.html">9</a>
</li>
<li class="item-group">
<a href="apart-but-together.html">10</a>
</li>
<li class="item-group">
<a href="unexpected-cuddlies.html">11</a>
</li>
<li class="item-group">
<a href="#modal" id="modal-btn">12</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="wrapper">
<main id="introduction">
<section id="showcase">
<div class="title">
<h2 class="mobile">ABOUT US</h2>
</div>
</section>
<article id="story">
<div class="left">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur sequi praesentium laudantium sapiente culpa assumenda pariatur quos maxime eos quisquam reiciendis cumque, hic aspernatur distinctio minus perspiciatis unde, necessitatibus corporis minima! Ratione porro cumque vitae suscipit tempora optio accusamus quasi ipsum ut, explicabo dolorem autem. Illo excepturi quibusdam nesciunt recusandae aut. Quod, explicabo voluptatum vitae ullam iste natus itaque fugiat provident libero vel aspernatur facilis quisquam corporis fugit molestias perspiciatis sed, culpa in ea odio. Culpa nihil, voluptate doloremque deserunt totam velit iste, distinctio beatae nobis ea sapiente a sint quas natus maiores delectus quisquam ratione vitae perspiciatis laborum quis. Ut nisi dignissimos modi impedit officia voluptate aspernatur ea repellat obcaecati. Nemo necessitatibus commodi voluptas velit quibusdam repellat sequi voluptatum assumenda quam nesciunt recusandae ea, consequuntur adipisci accusantium magni quasi similique reiciendis beatae tenetur quo. Nulla aliquid cum omnis, consectetur quibusdam sint a illum at voluptate nisi voluptates perspiciatis alias labore ea ullam ipsa, nam exercitationem tenetur? Illum eius sint soluta officiis nulla aliquid fuga repellendus ex provident similique, debitis minima amet voluptates praesentium aliquam culpa quidem accusamus molestias ab. Exercitationem quibusdam excepturi, illo doloribus fugit facilis fuga alias suscipit dolorem sed quia molestiae rerum, odio consequuntur incidunt commodi hic ratione. Deserunt et tenetur neque a nesciunt velit doloremque fugiat quis blanditiis nulla itaque ratione quia ab in, facere iusto consectetur aliquam provident. Iste impedit adipisci porro dolores maiores doloribus eligendi voluptates, reprehenderit accusamus quibusdam numquam nobis esse, et natus, harum corporis laboriosam optio pariatur tempore est ad ex tempora cupiditate cumque. Exercitationem sint, voluptas facere consequuntur sit alias aliquid atque, quo autem cumque ab accusamus? Nesciunt rerum a assumenda amet accusantium vitae iure reprehenderit debitis illum placeat veritatis similique iusto minus ipsa, voluptatem nulla quisquam. Est enim, nemo numquam autem atque assumenda minus. Ab dolore facilis ipsa iste quas sit, obcaecati accusantium eaque atque nobis doloremque officiis, laudantium nesciunt perferendis hic fuga pariatur placeat. Tenetur fugiat quidem quae maxime minima incidunt dicta deserunt voluptatum consectetur, veritatis ratione nobis nisi est, exercitationem minus beatae quis esse non odit sapiente nam! Obcaecati mollitia maxime dicta architecto officia commodi ab, nisi beatae dignissimos labore et, tempore inventore blanditiis recusandae repudiandae impedit quis maiores velit in atque ad. Magnam sint odit saepe quas delectus tempora laudantium error vel ut earum, praesentium eveniet itaque molestias? Optio libero, commodi nihil odio in porro nam, excepturi dolorum ad blanditiis officia iusto nesciunt recusandae nulla velit. Nemo eum magni id? Sequi sed ab omnis voluptates quam in ea, blanditiis iusto maxime voluptatum maiores accusamus exercitationem voluptas pariatur alias saepe sapiente quos nesciunt hic consectetur. Quis officia, quia doloribus natus vero minima vitae molestiae assumenda illum quo eius est illo temporibus ab, delectus soluta obcaecati, fuga dicta incidunt consectetur doloremque vel id sapiente quod. Sapiente, quasi molestias quaerat numquam explicabo sunt nisi, nulla architecto magnam sed cupiditate unde, enim quidem vitae illum autem. Totam, odit nesciunt. Saepe, asperiores eos dolor soluta veritatis adipisci similique sapiente at iste quae, harum minima quaerat ut est. Distinctio autem deleniti libero dolores. Iusto omnis esse quo unde praesentium saepe veritatis? Quas explicabo velit error inventore et architecto, vero voluptates non ex, at magni quos quisquam voluptate illum excepturi pariatur rem cupiditate nisi aut illo labore molestiae, quam corrupti. Reprehenderit, unde! Officia ipsum nulla libero dignissimos quaerat voluptate facere soluta ipsa quo, unde doloremque maxime culpa quasi adipisci laboriosam, vel ducimus nesciunt earum quas dolorum illum ad aut. Doloribus dignissimos at ducimus esse illum quae voluptatibus perferendis, reprehenderit laborum quos sed odio quidem aperiam architecto inventore ut sunt fugiat, dolor adipisci consequatur amet quia modi tenetur! Nemo dignissimos ex quos a deleniti debitis dolorem reprehenderit, veniam recusandae ducimus voluptatibus iste, quam aliquam! Dolore cumque consequuntur repudiandae ab in quis, a ex iste sunt ratione assumenda quaerat amet, culpa eligendi aliquam rerum inventore corrupti, repellat modi earum aperiam incidunt fugit! Neque corporis ratione provident sapiente animi officia, inventore id, temporibus, rem porro vero delectus dolores voluptate consequuntur quod iusto quibusdam alias amet aperiam eum voluptates! Suscipit accusamus rerum quis voluptas repellendus incidunt asperiores ea hic cumque consectetur totam nam quas, molestias soluta eum earum facere ipsam inventore! Unde dolores dolorem reprehenderit qui magni veniam beatae sint eaque, alias nemo assumenda saepe optio harum? Neque corrupti recusandae vel ea nisi facere illum molestias maxime corporis, ratione aliquid fuga assumenda labore perferendis necessitatibus provident vitae nostrum suscipit quam quidem doloribus aut rerum. Consequuntur blanditiis accusantium iure. Assumenda iste expedita ut fugiat numquam incidunt labore, veniam dignissimos asperiores laboriosam consequuntur exercitationem impedit quisquam nulla nobis vitae. Minus, in. Voluptate dolorem eligendi necessitatibus neque animi corporis sit recusandae, ad veritatis, minus odio asperiores ipsa molestiae dolorum cupiditate nihil illum voluptates nam ducimus labore esse natus laudantium a. Porro consequatur ab reprehenderit. Illum, eaque libero, sit quisquam incidunt in ullam veniam nostrum iste temporibus cum fugiat quaerat rem illo laboriosam tempora explicabo modi assumenda nobis excepturi quibusdam placeat, non voluptatem dolores. Sit praesentium maiores facere id ipsam! Repellendus doloribus error non suscipit illum? Qui, veniam. Magnam quos molestias unde qui deleniti tempore. Cumque perferendis quaerat nobis dicta, est assumenda maxime ducimus, voluptatem doloribus officia natus exercitationem excepturi quo eligendi repellendus tempora reiciendis! Est mollitia officia voluptas iure ipsum. Aspernatur, mollitia quae? Repudiandae, commodi impedit dolorem libero est ratione repellendus quas veritatis ex velit distinctio doloremque fugiat delectus provident. Impedit velit in, eum, reiciendis excepturi pariatur ducimus inventore blanditiis omnis libero ratione sequi ea soluta placeat cupiditate aliquid laudantium asperiores cum, deleniti veniam necessitatibus. Quos ab magni ducimus officiis eos tenetur est accusamus autem optio culpa minus iste consequuntur saepe repellat, dolore earum nisi, sed, quaerat quibusdam! Incidunt animi hic, esse deserunt pariatur provident molestiae ipsam mollitia adipisci sequi praesentium explicabo suscipit quis sed possimus ex aspernatur maiores alias nulla placeat ab! Debitis, saepe perferendis. Ab eveniet accusamus minima animi aut odio, quos culpa tempora corrupti veritatis vel natus totam eligendi. Ut non dolor aliquam nostrum at, molestiae quas quod quia, sed ducimus et ad magnam laboriosam aliquid vero eos maxime blanditiis assumenda voluptate doloribus eum possimus voluptas eligendi adipisci.</p>
</div>
</article>
</main>
</div>
<!-- Scroll back to top button EN -->
<div>
<button class="scrollButton" title="Back to Top"><i class="fa fa-angle-double-up fa-2x"></i></button>
</div>
if (window.innerWidth > 1024) {
const wrapper = document.querySelector('.wrapper');
const overlay = document.querySelector('#overlay');
const navbar = overlay.firstElementChild;
overlay.removeChild(navbar);
wrapper.appendChild(navbar);
}
/* Scroll back to top button */
const scrollToTop = document.querySelector('.scrollButton');
window.onscroll = function() {scrollBack()};
function scrollBack() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
scrollToTop.style.display = "block";
}
else {
scrollToTop.style.display = "none";
}
}
scrollToTop.addEventListener('click', () => {
backToTop();
})
function backToTop() {
document.body.scrollTop = 0
document.documentElement.scrollTop = 0
}
试试这个代码：
/* Scroll back to top button */
const scrollToTopBtn = document.querySelector('.scrollButton');
const innerContainer = document.querySelector("#introduction");
const scrollHandler = ({target: {scrollTop}}) => {
if(scrollTop > 50) {
scrollToTopBtn.style.display = "block"
} else {
scrollToTopBtn.style.display = "none"
}
}
innerContainer.addEventListener("scroll", scrollHandler);
scrollToTopBtn.addEventListener('click', () => {
backToTop(innerContainer);
})
function backToTop(el) {
el.scrollTop = 0
}
例子CodePen
所以，我有一个滚动到顶部的按钮，当您向下滚动页面时它会出现，但目前它出现在外部（主体）滚动条移动上。我需要它在移动内部（文章#story）滚动条时出现。这是带有演示的代码和 CodePen。你会如何编写函数，使按钮仅在滚动内部滚动条时出现？
<a class="logo" href="index.html"><h1>LOREMIS</h1></a>
<h2 class="desktop">ABOUT US</h2>
<!-- Menu overlay -->
<div id="overlay">
<nav id="navbar">
<ul class="menu">
<li class="item-group">
<a href="index.html">1</a>
</li>
<li class="item-group">
<a href="everyday-life.html">2</a>
</li>
<li class="item-group">
<a href="yummy.html">3</a>
</li>
<li class="item-group">
<a href="not-just-cuddlies.html">4</a>
</li>
<li class="item-group">
<a href="making-memories.html">5</a>
</li>
<li class="item-group">
<a href="around-the-world.html">6</a>
</li>
<li class="item-group">
<a href="somewhere-over-the-rainbow.html">7</a>
</li>
<li class="item-group">
<a href="talent-show.html">8</a>
</li>
<li class="item-group">
<a href="celebrations.html">9</a>
</li>
<li class="item-group">
<a href="apart-but-together.html">10</a>
</li>
<li class="item-group">
<a href="unexpected-cuddlies.html">11</a>
</li>
<li class="item-group">
<a href="#modal" id="modal-btn">12</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="wrapper">
<main id="introduction">
<section id="showcase">
<div class="title">
<h2 class="mobile">ABOUT US</h2>
</div>
</section>
<article id="story">
<div class="left">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur sequi praesentium laudantium sapiente culpa assumenda pariatur quos maxime eos quisquam reiciendis cumque, hic aspernatur distinctio minus perspiciatis unde, necessitatibus corporis minima! Ratione porro cumque vitae suscipit tempora optio accusamus quasi ipsum ut, explicabo dolorem autem. Illo excepturi quibusdam nesciunt recusandae aut. Quod, explicabo voluptatum vitae ullam iste natus itaque fugiat provident libero vel aspernatur facilis quisquam corporis fugit molestias perspiciatis sed, culpa in ea odio. Culpa nihil, voluptate doloremque deserunt totam velit iste, distinctio beatae nobis ea sapiente a sint quas natus maiores delectus quisquam ratione vitae perspiciatis laborum quis. Ut nisi dignissimos modi impedit officia voluptate aspernatur ea repellat obcaecati. Nemo necessitatibus commodi voluptas velit quibusdam repellat sequi voluptatum assumenda quam nesciunt recusandae ea, consequuntur adipisci accusantium magni quasi similique reiciendis beatae tenetur quo. Nulla aliquid cum omnis, consectetur quibusdam sint a illum at voluptate nisi voluptates perspiciatis alias labore ea ullam ipsa, nam exercitationem tenetur? Illum eius sint soluta officiis nulla aliquid fuga repellendus ex provident similique, debitis minima amet voluptates praesentium aliquam culpa quidem accusamus molestias ab. Exercitationem quibusdam excepturi, illo doloribus fugit facilis fuga alias suscipit dolorem sed quia molestiae rerum, odio consequuntur incidunt commodi hic ratione. Deserunt et tenetur neque a nesciunt velit doloremque fugiat quis blanditiis nulla itaque ratione quia ab in, facere iusto consectetur aliquam provident. Iste impedit adipisci porro dolores maiores doloribus eligendi voluptates, reprehenderit accusamus quibusdam numquam nobis esse, et natus, harum corporis laboriosam optio pariatur tempore est ad ex tempora cupiditate cumque. Exercitationem sint, voluptas facere consequuntur sit alias aliquid atque, quo autem cumque ab accusamus? Nesciunt rerum a assumenda amet accusantium vitae iure reprehenderit debitis illum placeat veritatis similique iusto minus ipsa, voluptatem nulla quisquam. Est enim, nemo numquam autem atque assumenda minus. Ab dolore facilis ipsa iste quas sit, obcaecati accusantium eaque atque nobis doloremque officiis, laudantium nesciunt perferendis hic fuga pariatur placeat. Tenetur fugiat quidem quae maxime minima incidunt dicta deserunt voluptatum consectetur, veritatis ratione nobis nisi est, exercitationem minus beatae quis esse non odit sapiente nam! Obcaecati mollitia maxime dicta architecto officia commodi ab, nisi beatae dignissimos labore et, tempore inventore blanditiis recusandae repudiandae impedit quis maiores velit in atque ad. Magnam sint odit saepe quas delectus tempora laudantium error vel ut earum, praesentium eveniet itaque molestias? Optio libero, commodi nihil odio in porro nam, excepturi dolorum ad blanditiis officia iusto nesciunt recusandae nulla velit. Nemo eum magni id? Sequi sed ab omnis voluptates quam in ea, blanditiis iusto maxime voluptatum maiores accusamus exercitationem voluptas pariatur alias saepe sapiente quos nesciunt hic consectetur. Quis officia, quia doloribus natus vero minima vitae molestiae assumenda illum quo eius est illo temporibus ab, delectus soluta obcaecati, fuga dicta incidunt consectetur doloremque vel id sapiente quod. Sapiente, quasi molestias quaerat numquam explicabo sunt nisi, nulla architecto magnam sed cupiditate unde, enim quidem vitae illum autem. Totam, odit nesciunt. Saepe, asperiores eos dolor soluta veritatis adipisci similique sapiente at iste quae, harum minima quaerat ut est. Distinctio autem deleniti libero dolores. Iusto omnis esse quo unde praesentium saepe veritatis? Quas explicabo velit error inventore et architecto, vero voluptates non ex, at magni quos quisquam voluptate illum excepturi pariatur rem cupiditate nisi aut illo labore molestiae, quam corrupti. Reprehenderit, unde! Officia ipsum nulla libero dignissimos quaerat voluptate facere soluta ipsa quo, unde doloremque maxime culpa quasi adipisci laboriosam, vel ducimus nesciunt earum quas dolorum illum ad aut. Doloribus dignissimos at ducimus esse illum quae voluptatibus perferendis, reprehenderit laborum quos sed odio quidem aperiam architecto inventore ut sunt fugiat, dolor adipisci consequatur amet quia modi tenetur! Nemo dignissimos ex quos a deleniti debitis dolorem reprehenderit, veniam recusandae ducimus voluptatibus iste, quam aliquam! Dolore cumque consequuntur repudiandae ab in quis, a ex iste sunt ratione assumenda quaerat amet, culpa eligendi aliquam rerum inventore corrupti, repellat modi earum aperiam incidunt fugit! Neque corporis ratione provident sapiente animi officia, inventore id, temporibus, rem porro vero delectus dolores voluptate consequuntur quod iusto quibusdam alias amet aperiam eum voluptates! Suscipit accusamus rerum quis voluptas repellendus incidunt asperiores ea hic cumque consectetur totam nam quas, molestias soluta eum earum facere ipsam inventore! Unde dolores dolorem reprehenderit qui magni veniam beatae sint eaque, alias nemo assumenda saepe optio harum? Neque corrupti recusandae vel ea nisi facere illum molestias maxime corporis, ratione aliquid fuga assumenda labore perferendis necessitatibus provident vitae nostrum suscipit quam quidem doloribus aut rerum. Consequuntur blanditiis accusantium iure. Assumenda iste expedita ut fugiat numquam incidunt labore, veniam dignissimos asperiores laboriosam consequuntur exercitationem impedit quisquam nulla nobis vitae. Minus, in. Voluptate dolorem eligendi necessitatibus neque animi corporis sit recusandae, ad veritatis, minus odio asperiores ipsa molestiae dolorum cupiditate nihil illum voluptates nam ducimus labore esse natus laudantium a. Porro consequatur ab reprehenderit. Illum, eaque libero, sit quisquam incidunt in ullam veniam nostrum iste temporibus cum fugiat quaerat rem illo laboriosam tempora explicabo modi assumenda nobis excepturi quibusdam placeat, non voluptatem dolores. Sit praesentium maiores facere id ipsam! Repellendus doloribus error non suscipit illum? Qui, veniam. Magnam quos molestias unde qui deleniti tempore. Cumque perferendis quaerat nobis dicta, est assumenda maxime ducimus, voluptatem doloribus officia natus exercitationem excepturi quo eligendi repellendus tempora reiciendis! Est mollitia officia voluptas iure ipsum. Aspernatur, mollitia quae? Repudiandae, commodi impedit dolorem libero est ratione repellendus quas veritatis ex velit distinctio doloremque fugiat delectus provident. Impedit velit in, eum, reiciendis excepturi pariatur ducimus inventore blanditiis omnis libero ratione sequi ea soluta placeat cupiditate aliquid laudantium asperiores cum, deleniti veniam necessitatibus. Quos ab magni ducimus officiis eos tenetur est accusamus autem optio culpa minus iste consequuntur saepe repellat, dolore earum nisi, sed, quaerat quibusdam! Incidunt animi hic, esse deserunt pariatur provident molestiae ipsam mollitia adipisci sequi praesentium explicabo suscipit quis sed possimus ex aspernatur maiores alias nulla placeat ab! Debitis, saepe perferendis. Ab eveniet accusamus minima animi aut odio, quos culpa tempora corrupti veritatis vel natus totam eligendi. Ut non dolor aliquam nostrum at, molestiae quas quod quia, sed ducimus et ad magnam laboriosam aliquid vero eos maxime blanditiis assumenda voluptate doloribus eum possimus voluptas eligendi adipisci.</p>
</div>
</article>
</main>
</div>
<!-- Scroll back to top button EN -->
<div>
<button class="scrollButton" title="Back to Top"><i class="fa fa-angle-double-up fa-2x"></i></button>
</div>
if (window.innerWidth > 1024) {
const wrapper = document.querySelector('.wrapper');
const overlay = document.querySelector('#overlay');
const navbar = overlay.firstElementChild;
overlay.removeChild(navbar);
wrapper.appendChild(navbar);
}
/* Scroll back to top button */
const scrollToTop = document.querySelector('.scrollButton');
window.onscroll = function() {scrollBack()};
function scrollBack() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
scrollToTop.style.display = "block";
}
else {
scrollToTop.style.display = "none";
}
}
scrollToTop.addEventListener('click', () => {
backToTop();
})
function backToTop() {
document.body.scrollTop = 0
document.documentElement.scrollTop = 0
}
试试这个代码：
/* Scroll back to top button */
const scrollToTopBtn = document.querySelector('.scrollButton');
const innerContainer = document.querySelector("#introduction");
const scrollHandler = ({target: {scrollTop}}) => {
if(scrollTop > 50) {
scrollToTopBtn.style.display = "block"
} else {
scrollToTopBtn.style.display = "none"
}
}
innerContainer.addEventListener("scroll", scrollHandler);
scrollToTopBtn.addEventListener('click', () => {
backToTop(innerContainer);
})
function backToTop(el) {
el.scrollTop = 0
}
例子CodePen