平滑滚动到按钮-如何解决？

问题描述 投票：0回答：2

我已经在我的网站上创建了一个按钮，希望它在单击时能够平滑滚动。我创建了一些我认为可以工作的东西，但是没有用。任何想法或修正。非常感谢。

HTML

<div class="col col-sm-12 span-12">
  <div class="about-btn">
    <button id="about-smooth-scrolling-btn"><strong>CONTACT US</strong></button>
  </div>
</div>

CSS

.about-btn button {
    background-color: transparent;
    border-style: solid;
    border-width: 2px;
    border-color: #000E47;
    color: #000E47;
    padding: 10px;
    margin: auto;
    transition: 1s;
}

.about-btn button:hover {
    background-color: #000E47;
    border-radius: 25px;
    padding: 10px;
    color: #fff;
    margin: auto;
    transition: 1s;
}

JS

$("#about-smooth-scrolling-btn").click(function () {
  $('html, body').animate({
    scrollTop: $("#about-section").offset().top
  }, 2000);
})

非常感谢任何帮助。

javascript html css button
2个回答
0
投票
  1. 此代码使用的是jQuery，但您没有包含它。另外，您没有在此问题上添加“ jquery”标签，因此我猜您没有它，并认为这是普通的JS示例。
  2. 代码中没有“＃about-section”。

包括jquery并添加缺少的div之后，一切正常。

$("#about-smooth-scrolling-btn").click(function () {
  $('html, body').animate({
    scrollTop: $("#about-section").offset().top
  }, 2000);
})
.about-btn button {
    background-color: transparent;
    border-style: solid;
    border-width: 2px;
    border-color: #000E47;
    color: #000E47;
    padding: 10px;
    margin: auto;
    transition: 1s;
}

.about-btn button:hover {
    background-color: #000E47;
    border-radius: 25px;
    padding: 10px;
    color: #fff;
    margin: auto;
    transition: 1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col col-sm-12 span-12">
  <div class="about-btn">
    <button id="about-smooth-scrolling-btn"><strong>CONTACT US</strong></button>
  </div>
</div>

<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam omnis ratione incidunt accusamus praesentium eaque quod ipsum expedita libero, veniam et maiores autem reiciendis accusantium. Voluptatum quidem nostrum inventore at?</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam omnis ratione incidunt accusamus praesentium eaque quod ipsum expedita libero, veniam et maiores autem reiciendis accusantium. Voluptatum quidem nostrum inventore at?</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam omnis ratione incidunt accusamus praesentium eaque quod ipsum expedita libero, veniam et maiores autem reiciendis accusantium. Voluptatum quidem nostrum inventore at?</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam omnis ratione incidunt accusamus praesentium eaque quod ipsum expedita libero, veniam et maiores autem reiciendis accusantium. Voluptatum quidem nostrum inventore at?</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam omnis ratione incidunt accusamus praesentium eaque quod ipsum expedita libero, veniam et maiores autem reiciendis accusantium. Voluptatum quidem nostrum inventore at?</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam omnis ratione incidunt accusamus praesentium eaque quod ipsum expedita libero, veniam et maiores autem reiciendis accusantium. Voluptatum quidem nostrum inventore at?</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam omnis ratione incidunt accusamus praesentium eaque quod ipsum expedita libero, veniam et maiores autem reiciendis accusantium. Voluptatum quidem nostrum inventore at?</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam omnis ratione incidunt accusamus praesentium eaque quod ipsum expedita libero, veniam et maiores autem reiciendis accusantium. Voluptatum quidem nostrum inventore at?</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam omnis ratione incidunt accusamus praesentium eaque quod ipsum expedita libero, veniam et maiores autem reiciendis accusantium. Voluptatum quidem nostrum inventore at?</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam omnis ratione incidunt accusamus praesentium eaque quod ipsum expedita libero, veniam et maiores autem reiciendis accusantium. Voluptatum quidem nostrum inventore at?</div>
<div id="about-section">ABOUT SECTION Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam omnis ratione incidunt accusamus praesentium eaque quod ipsum expedita libero, veniam et maiores autem reiciendis accusantium. Voluptatum quidem nostrum inventore at?</div>
0
投票

这里是工作代码：

<!DOCTYPE html>
<html>
<body>
    <style>
        .about-btn button {
            background-color: transparent;
            border-style: solid;
            border-width: 2px;
            border-color: #000E47;
            color: #000E47;
            padding: 10px;
            margin: auto;
            transition: 1s;
        }

        .about-btn button:hover {
            background-color: #000E47;
            border-radius: 25px;
            padding: 10px;
            color: #fff;
            margin: auto;
            transition: 1s;
        }
    </style>
    <div class="col col-sm-12 span-12">
        <div class="about-btn">
            <button id="about-smooth-scrolling-btn"><strong>CONTACT US</strong></button>
        </div>
    </div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <div id="about-section">About</div>
    <script crossorigin='anonymous' integrity='sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js'></script>
    <script>
    $("#about-smooth-scrolling-btn").click(function () {
        $('html, body').animate({
            scrollTop: $("#about-section").offset().top
        }, 2000);
    });
    </script>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.