滚动到部分顶部 (.js)

Question

how can i writing in java script, that when i click on just Read less button jump to the first element, i solved that with this code >> toggle_switch[0].scrollIntoView(false) it jumps up to where the button in read less position is, but i wanna set the position totally top of button where the first element (div) is我如何在 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>

Answer 1

solution without any library or framework:没有任何库或框架的解决方案：

button.addEventListener("click", function () {
  window.scroll({
    top: 0,
    left: 0,
    behavior: 'smooth'
  });
});

you can calculate the exact position of the div you want to scroll-to您可以计算要滚动到的 div 的确切 position

const bodyRect = document.body.getBoundingClientRect(),
  elemRect = element.getBoundingClientRect(),
  offset   = elemRect.top - bodyRect.top;

an than use the variable "offset" in the scroll() function.然后在 scroll() function 中使用变量“offset”。 top: offset顶部：偏移

Edit:编辑：

javascript: 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'
   });
  }
});

just add this class to your element, wich you want to be seen/not seen只需将此 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">

also add the class ".target-container" to the div to wich you want to scroll to.还将 class ".target-container" 添加到要滚动到的 div 中。

and remove the styling in the HTML file.并删除 HTML 文件中的样式。 styling in html has the highest priority so it overwrites the external styles. 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>

滚动到部分顶部 (.js)

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-02-24 14:40:37

滚动到部分顶部 (.js)

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-02-24 14:40:37

解决方案1
0 已采纳 2021-02-24 14:40:37