如何使用Bootstrap平滑滚动启用默认锚定行为?

时间:2016-02-18 19:48:40

标签: javascript jquery html css twitter-bootstrap

我想要平滑滚动以及链接到其他页面。在其他页面上,当点击一些哈希链接以重定向到该链接到该链接时。

就像没有阻止default()的ancor的行为,但是如果知道我的意思,使用prevent default()。 有什么想法吗?

这是我的功能:

 <script>
    $(document).ready(function(){
      // Add scrollspy to <body>
      $('body').scrollspy({target: ".navbar", offset: 50});   

      // Add smooth scrolling on all links inside the navbar
      $("#bs-example-navbar-collapse-1 a, #totop a").on('click', function(event) {
       // Prevent default anchor click behavior
        event.preventDefault();
        // Store hash
        var hash = this.hash;

        // Using jQuery's animate() method to add smooth page scroll
        // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
        $('html, body').animate({
          scrollTop: $(hash).offset().top
        }, 800, function(){

          // Add hash (#) to URL when done scrolling (default click behavior)
          window.location.hash = hash;
        });
      });
    });
    </script>

这是我的导航

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <ul class="nav navbar-nav">
                <li ><a href="<?=base_url();?>#top">Начало</a> </li>
                <li ><a href="<?=base_url();?>#services">Продукти</a></li>
                <li ><a href="<?=base_url('news');?>">Новини</a></li>
                <li ><a href="#aboutus">За нас <span class="sr-only">(current)</span></a></li>
                <li ><a href="#contacts">Контакти</a></li>
            </ul>
        <form class="navbar-form navbar-right" role="search" action="" method="post">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Търси в продукти" name="search">
            </div>
            <button type="submit" class="btn btn-default" name="submit">Търсене</button>
        </form>
    </div>

0 个答案:

没有答案