用户单击按钮时 Bootstrap 向下滚动

guicsvcw 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(2)|浏览(254)

如何使用页面向下滚动像in this example没有任何连接使用导航栏，特别是在JavaScript部分？
我希望发生的事情就像这个例子中的那样：一旦用户点击按钮，它将直接转到部分页面，它应该是平滑滚动与样本链接相同。
下面是我的示例代码

<div class="jumbotron">

<div class="career-jumbotron">
    <div class="container">
        <a href="#opportunities" class="page-scroll btn btn-xl">
         Button</a>
    </div>
</div> 
<section id="opportunities">
    <div class="container">

    -----sample text-----

    </div>
</section>

twitter-bootstrap

来源：https://stackoverflow.com/questions/27558323/bootstrap-scroll-down-when-the-user-clicks-the-button

2条答案

按热度按时间

zrfyljdw1#

这是一个javascript代码片段，可以平滑滚动 * 同页链接 *，它可以观察并将平滑效果应用到所有以#开头的链接

您需要添加jQuery库

$(function(){
   $('a[href*=#]:not([href=#])').click(function() {
       if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
         var target = $(this.hash);
         target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
         if (target.length) {
           $('html,body').animate({
             scrollTop: (target.offset().top - 135) // adjust this according to your content
           }, 1000);
           return false;
         }
       }
   });
 });

赞(0）回复(0）举报 2022-12-16

o75abkj42#

有一种方法对我来说不需要使用JS...

<div class="jumbotron">

<div class="career-jumbotron">
    <div class="container">
        <button type="button" class="btn"><a href="#opputunities" style="text-decoration: none; color: black">Button</a></button>
    </div>
</div> 
<section id="opportunities">
    <div class="container">

    -----sample text-----

    </div>
</section>

赞(0）回复(0）举报 2022-12-16

我来回答

用户单击按钮时 Bootstrap 向下滚动

2条答案

相关问题

热门标签

最新问答