滚动到部分顶部 (.js)
[英]Scroll to the top of section (.js)
问题描述
我如何在 java 脚本中编写，当我点击 Read less 按钮跳转到第一个元素时，我用这段代码解决了这个问题>> toggle_switch[0].scrollIntoView(false) 它跳到了 read less 按钮的位置position 是，但我想将 position 完全设置在第一个元素（div）所在的按钮顶部
$(document).ready(function () { $('.nav-toggle').click(function () { var collapse_content_selector = $(this).attr('href'); var toggle_switch = $(this); $(collapse_content_selector).toggle(function () { if ($(this).css('display') == 'none') { toggle_switch.html('Read More'); } else { toggle_switch.html('Read Less'); } }); }); });
<,DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1. shrink-to-fit=no"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/fontawesome/css/all.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <section> <div class="container"> <div class="row"> <h1 class="col-12 text-center pb-5 pt-5">Aktionen</h1> <div class="col-md-4 mb-4 aktion-text"> <h2></h2> <div class="hovereffect"> <img class="img-fluid d-block mx-auto" src="image/Bild_7.jpg"> </div> <h2 class="center">Industrie</h2> </div> <div class="col-md-4 mb-4 aktion-text"> <h2></h2> <div class="hovereffect"> <img class="img-fluid d-block mx-auto" src="image/Bild_6.jpg"> </div> <h2 class="center">Industrie</h2> </div> <div class="col-md-4 mb-4 aktion-text"> <h2></h2> <div class="hovereffect"> <img class="img-fluid d-block mx-auto" src="image/Bild_5:jpg"> </div> <h2 class="center">Industrie</h2> </div> </div> </div> <div class="container"> <div class="row" id="collapse" style="display.none"> <div class="col-md-4 mb-4 aktion-text"> <h2></h2> <div class="hovereffect"> <img class="img-fluid d-block mx-auto" src="image/Bild_20.jpg"> </div> <h2 class="center">Industrie</h2> </div> <div class="col-md-4 mb-4 aktion-text"> <h2></h2> <div class="hovereffect"> <img class="img-fluid d-block mx-auto" src="image/Bild_12.jpg"> </div> <h2 class="center">Industrie</h2> </div> <div class="col-md-4 mb-4 aktion-text"> <h2></h2> <div class="hovereffect"> <img class="img-fluid d-block mx-auto" src="image/Bild_11:jpg"> </div> <h2 class="center">Industrie</h2> </div> </div> <div class="d-flex justify-content-center"> <button type="button" href="#collapse" class="btn btn-secondary nav-toggle">Read More</button></div> </div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/main.js"></script> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2021-02-24 14:40:37
没有任何库或框架的解决方案：
button.addEventListener("click", function () {
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});
});
您可以计算要滚动到的 div 的确切 position
const bodyRect = document.body.getBoundingClientRect(),
elemRect = element.getBoundingClientRect(),
offset = elemRect.top - bodyRect.top;
然后在 scroll() function 中使用变量“offset”。 顶部：偏移
编辑：
javascript：
const btn = document.querySelector(".btn");
const elementToShow = document.querySelector(".element-to-show");
btn.addEventListener("click", function () {
if (btn.textContent === "Read More") {
btn.textContent = "Read Less";
elementToShow.style.display="flex";
}
else if (btn.textContent === "Read Less") {
btn.textContent = "Read More";
elementToShow.style.display="none";
const bodyRect = document.body.getBoundingClientRect(),
elemRect = document.querySelector(".target-container").getBoundingClientRect(),
offset = elemRect.top - bodyRect.top;
window.scroll({
top: offset,
left: 0,
behavior: 'smooth'
});
}
});
只需将此 class 添加到您的元素中，您希望被看到/不被看到
.element-to-show {
display: none;
flex-direction: column;
}
<div class="container">
<div class="row element-to-show" id="collapse" >
<div class="col-md-4 mb-4 aktion-text">
还将 class ".target-container" 添加到要滚动到的 div 中。
并删除 HTML 文件中的样式。 html 中的样式具有最高优先级，因此它会覆盖外部 styles。
const btn = document.querySelector(".btn"); const elementToShow = document.querySelector(".element-to-show"); btn.addEventListener("click", function () { if (btn.textContent === "Read More") { btn.textContent = "Read Less"; elementToShow.style.display="flex"; } else if (btn.textContent === "Read Less") { btn.textContent = "Read More"; elementToShow.style.display="none"; const bodyRect = document.body.getBoundingClientRect(), elemRect = document.querySelector(".target-container").getBoundingClientRect(), offset = elemRect.top - bodyRect.top; window.scroll({ top: offset, left: 0, behavior: 'smooth' }); } })
.element-to-show { display: none; flex-direction: column; }
<,DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1. shrink-to-fit=no"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/fontawesome/css/all.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <section> <div class="container target-container"> <div class="row"> <h1 class="col-12 text-center pb-5 pt-5">Aktionen</h1> <div class="col-md-4 mb-4 aktion-text"> <h2></h2> <div class="hovereffect"> <img class="img-fluid d-block mx-auto" src="image/Bild_7.jpg"> </div> <h2 class="center">Industrie</h2> </div> <div class="col-md-4 mb-4 aktion-text"> <h2></h2> <div class="hovereffect"> <img class="img-fluid d-block mx-auto" src="image/Bild_6.jpg"> </div> <h2 class="center">Industrie</h2> </div> <div class="col-md-4 mb-4 aktion-text"> <h2></h2> <div class="hovereffect"> <img class="img-fluid d-block mx-auto" src="image/Bild_5.jpg"> </div> <h2 class="center">Industrie</h2> </div> </div> </div> <div class="container"> <div class="row element-to-show" id="collapse" > <div class="col-md-4 mb-4 aktion-text"> <h2></h2> <div class="hovereffect"> <img class="img-fluid d-block mx-auto" src="image/Bild_20.jpg"> </div> <h2 class="center">Industrie</h2> </div> <div class="col-md-4 mb-4 aktion-text"> <h2></h2> <div class="hovereffect"> <img class="img-fluid d-block mx-auto" src="image/Bild_12.jpg"> </div> <h2 class="center">Industrie</h2> </div> <div class="col-md-4 mb-4 aktion-text"> <h2></h2> <div class="hovereffect"> <img class="img-fluid d-block mx-auto" src="image/Bild_11:jpg"> </div> <h2 class="center">Industrie</h2> </div> </div> <div class="d-flex justify-content-center"> <button type="button" href="#collapse" class="btn btn-secondary nav-toggle">Read More</button></div> </div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/main.js"></script> </body> </html>
jQuery 滚动到顶部并滚动到下一部分
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.