Question

当用户单击button .employers-button并在JS中向下滚动到form #contact时，我正在尝试实现新的行为。

我用window.scrool实现了一个函数，当前的最高值是top: 200（因为它是一个值）。

它正在运行，但是如何将top: 2000替换为top: contact？我尝试放置contact而不是2000，但是它丝毫不会降低，因为它原本是int

const goToContact = () => {
    const button = document.getElementsByClassName("employers-button")[0];
    const contact = document.getElementById("contact");
    button.addEventListener("click", ()=>{
        event.preventDefault();
        window.scroll({
            top: 2000,
            behavior: 'smooth'
          });
    });
}

Answer 1

您可以使用定位标记

.big-space{
height:2000px;
}

<a href="#myForm">Button that scroll</a>
<div class="big-space">
</div>
<form id="myForm">
<label>form here</label>
<input type="text" />
</form>

Answer 2

为了顺利过渡，我做了以下小提琴。您要查找的属性是offsetTop。希望有帮助！

const button = document.getElementById("employers-button");
const contact = document.getElementById("contact");
button.addEventListener("click", ()=>{
    window.scroll({
        top: contact.offsetTop,
        behavior: 'smooth'
      });
});

html,
body {
  height: 3000px;
  background-image: linear-gradient(red, yellow);
}
#contact {
  margin-top: 1800px;
  height: 200px;
  background-color: green;
}

<button id="employers-button">Let's scroll!</button>
<div id="contact">Contact</div>

Answer 3

您尝试过以下方法吗：

VANILLA
top: contact.offsetTop;

Or JQUERY
top: contact.offset().top;
// but if you want it positioned relative to the closest positioned parent:
top: contact.position().top

在这种情况下，联系人是DOM元素，正如您正确提到的，window.scroll的top属性需要一个数字。

Answer 4

将element.scrollIntoView()与behavior:smooth一起使用以滚动到特定元素并避免任何黑客攻击。

codepen：https://codepen.io/murliprajapati/pen/RwwLYyR

function scrollToElement() {
  var elmnt = document.getElementById("content");
  elmnt.scrollIntoView({behavior:'smooth', block:'start'});
}

#myDIV {
  height: 250px;
  width: 100%;
  overflow: auto;
  background: green;
}

#content {
  margin-top:500px;
  height: 800px;
  width: 100%;
  background-color: coral;
}

<html>
<head>
</head>
<body>
<div id="myDIV">
  <button onclick="scrollToElement()">Scroll</button>
  <div id="content">
    Some text inside an element.
  </div>
</div>
</body>
</html>

单击具有平滑行为的按钮时滚动到div

4 个答案: