平滑滚动不光滑滚动（内联CSS）

发布于 2025-02-08 08:02:16 字数 592 浏览 2 评论 0原文

我想添加光滑的滚动效果，以便用户可以直接进入页面底部以填写表格。我需要使用内联CSS添加光滑的滚动效果。我使用了下面的代码，但我不确定为什么不工作？

/* added by edito for visualization purpose */
a {
  display: block;
  margin-bottom: 400vh;
}

<div>
  <a href="#quick-contact" style="scroll-behavior: smooth;">REGISTER NOW</a>

  <div id="quick-contact" class="quick-contact pad-bottom-30">
    <h4>REGISTER NOW</h4>
  </div>
</div>

原文

I want to add the smooth scrolling effect so users can go straight to the bottom of the page to fill out a form. I need to add the smooth scrolling effect using inline CSS. I used the code below but I'm not sure why is not working?

/* added by edito for visualization purpose */
a {
  display: block;
  margin-bottom: 400vh;
}

<div>
  <a href="#quick-contact" style="scroll-behavior: smooth;">REGISTER NOW</a>

  <div id="quick-contact" class="quick-contact pad-bottom-30">
    <h4>REGISTER NOW</h4>
  </div>
</div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你与昨日 2025-02-15 08:02:16

卷轴 - 行为：Smooth需要将下注应用于滚动元素，默认情况下为html：

/* added by edito for visualization purpose */
a {
  display: block;
  margin-bottom: 400vh;
}

<html style="scroll-behavior: smooth;">

<body>
  <div>
    <a href="#quick-contact">REGISTER NOW</a>

    <div id="quick-contact" class="quick-contact pad-bottom-30">
      <h4>REGISTER NOW</h4>
    </div>
  </div>
</body>

</html>

scroll-behavior: smooth needs to bet applied to the scrolling element which by default would be html:

/* added by edito for visualization purpose */
a {
  display: block;
  margin-bottom: 400vh;
}

<html style="scroll-behavior: smooth;">

<body>
  <div>
    <a href="#quick-contact">REGISTER NOW</a>

    <div id="quick-contact" class="quick-contact pad-bottom-30">
      <h4>REGISTER NOW</h4>
    </div>
  </div>
</body>

</html>

回复收藏 0 原文

云胡 2025-02-15 08:02:16

我建议使用JavaScript使用最新的scrollintoview（） scrollto（）函数。您可以检查[MDN doc] [1] s，因为scroll-behavior：Smooth没有所有浏览器支持，而且我们无法进行自定义。

逻辑您需要：。

let link = document.querySelector('a');
let targetElement = document.querySelector(".quick-contact");
link.addEventListener('click', function(){
   targetElement.scrollIntoView({behavior: "smooth"});
});

使html的启动更改，然后尝试使用，代码，我发现它是最简单的

let link = document.querySelector('.link');
let targetElement = document.querySelector(".quick-contact");

link.addEventListener('click', function(e){
   e.preventDefault();
   targetElement.scrollIntoView({behavior: "smooth"});
});

    .main {
      height:290vh;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }

    a {
      flex:1;
    }

    <div class="main">
      <a href="#" class="link">REGISTER NOW</a>

      <div class="quick-contact pad-bottom-30">
        <h4>REGISTER NOW</h4>
      </div>
    </div>

I would suggest using the latest scrollIntoView() or scrollTo() function using JavaScript. You can check [MDN Doc][1]s, because scroll-behavior:smooth doesn't have all browser support plus we can't make customisations.

LOGIC YOU NEED :.

let link = document.querySelector('a');
let targetElement = document.querySelector(".quick-contact");
link.addEventListener('click', function(){
   targetElement.scrollIntoView({behavior: "smooth"});
});

MAKE THE FOLLING CHANGES IN HTML AND TRY THIS, CODE, I FIND IT THE SIMPLEST

let link = document.querySelector('.link');
let targetElement = document.querySelector(".quick-contact");

link.addEventListener('click', function(e){
   e.preventDefault();
   targetElement.scrollIntoView({behavior: "smooth"});
});

    .main {
      height:290vh;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }

    a {
      flex:1;
    }

    <div class="main">
      <a href="#" class="link">REGISTER NOW</a>

      <div class="quick-contact pad-bottom-30">
        <h4>REGISTER NOW</h4>
      </div>
    </div>

回复收藏 0 原文