Cách thêm tính năng cuộn trơn tru vào chức năng gián điệp cuộn của Bootstrap

Question

Tôi đã cố gắng thêm chức năng cuộn trơn tru vào trang web của mình trong một thời gian nhưng có vẻ như không hoạt động được.

Dưới đây là mã HTML của tôi liên quan đến mục định hướng của tôi:

<div id="nav-wrapper"> 
<div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix" data-offset-top="675"> 
    <div class="navbar-inner" data-spy="affix-top"> 
    <div class="container"> 

     <!-- .btn-navbar is used as the toggle for collapsed navbar content --> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 

     <!-- Everything you want hidden at 940px or less, place within here --> 
     <div class="nav-collapse collapse"> 
     <ul class="nav"> 
      <li><a href="#home">Home</a></li> 
      <li><a href="#service-top">Services</a></li> 
      <li><a href="#contact-arrow">Contact</a></li> 
     </ul><!--/.nav--> 
     </div><!--/.nav-collapse collapse pull-right--> 
    </div><!--/.container--> 
    </div><!--/.navbar-inner--> 
</div><!--/#nav /.navbar navbar-inverse--> 
</div><!--/#nav-wrapper--> 

Đây là mã JS Tôi đã thêm:

<script src="js/jquery.scrollTo-1.4.3.1-min.js"></script> 

<script> 
    $(document).ready(function(e) { 

     $('#nav').scrollSpy() 
     $('#nav ul li a').bind('click', function(e) { 
      e.preventDefault(); 
      target = this.hash; 
      console.log(target); 
      $.scrollTo(target, 1000); 
     }); 
    }); 
</script> 

Đối với những gì nó có giá trị, here là nơi tôi đã nhận được thông tin về những gì tôi đã làm cho đến nay, và here là trang web của tôi ở dạng hiện tại của nó. Nếu bạn có thể giúp tôi tôi sẽ nướng cho bạn một chiếc bánh hoặc bánh quy hoặc một cái gì đó. Cảm ơn!

Answer 1

Bạn có thực sự cần plugin đó không? Bạn chỉ có thể animate scrollTop tài sản:

$("#nav ul li a[href^='#']").on('click', function(e) { 

    // prevent default anchor click behavior 
    e.preventDefault(); 

    // store hash 
    var hash = this.hash; 

    // animate 
    $('html, body').animate({ 
     scrollTop: $(hash).offset().top 
    }, 300, function(){ 

     // when done, add hash to url 
     // (default click behaviour) 
     window.location.hash = hash; 
    }); 

}); 

fiddle

Answer 2

gì onetrickpony đăng là được rồi, nhưng nếu bạn muốn có một giải pháp tổng quát hơn, bạn chỉ có thể sử dụng mã dưới đây.

Thay vì chỉ chọn id của neo, bạn có thể làm cho nó hơi giống tiêu chuẩn hơn và chỉ cần chọn thuộc tính name của <a> -Tag. Điều này sẽ giúp bạn tiết kiệm được bằng cách viết thêm một thẻ id. Chỉ cần thêm lớp smoothscroll vào phần tử navbar.

gì thay đổi

1) $('#nav ul li a[href^="#"]') để $('#nav.smoothscroll ul li a[href^="#"]')

2) $(this.hash) để $('a[name="' + this.hash.replace('#', '') + '"]')

cuối cùng Mã

/* Enable smooth scrolling on all links with anchors */ 
$('#nav.smoothscroll ul li a[href^="#"]').on('click', function(e) { 

    // prevent default anchor click behavior 
    e.preventDefault(); 

    // store hash 
    var hash = this.hash; 

    // animate 
    $('html, body').animate({ 
    scrollTop: $('a[name="' + this.hash.replace('#', '') + '"]').offset().top 
    }, 300, function(){ 

    // when done, add hash to url 
    // (default click behaviour) 
    window.location.hash = hash; 

    }); 
}); 

Answer 3

Nếu bạn có một thanh điều hướng khắc phục, bạn' ll n eed một cái gì đó như thế này.

Lấy từ tốt nhất của các câu trả lời và bình luận trên ...

$(".bs-js-navbar-scrollspy li a[href^='#']").on('click', function(event) { 
    var target = this.hash; 

    event.preventDefault(); 

    var navOffset = $('#navbar').height(); 

    return $('html, body').animate({ 
    scrollTop: $(this.hash).offset().top - navOffset 
    }, 300, function() { 
    return window.history.pushState(null, null, target); 
    }); 
}); 

Đầu tiên, để ngăn chặn các lỗi "không xác định", lưu trữ băm cho một biến, target, trước khi gọi preventDefault(), và sau đó tham chiếu rằng giá trị được lưu trữ thay vào đó, như đã đề cập bởi pupadupa.

Tiếp theo. Bạn không thể sử dụng window.location.hash = target vì nó đặt url và vị trí đồng thời thay vì riêng biệt. Bạn sẽ có vị trí ở đầu phần tử có id khớp với href ... nhưng được bao phủ bởi thanh điều hướng trên cùng cố định của bạn.

Để giải quyết vấn đề này, bạn đặt giá trị scrollTop của mình thành giá trị vị trí cuộn dọc của mục tiêu trừ đi độ cao của thanh điều hướng cố định. Nhắm mục tiêu trực tiếp giá trị đó duy trì việc cuộn trơn tru, thay vì thêm điều chỉnh sau đó và nhận được các jitters không chuyên nghiệp.

Bạn sẽ thấy url không thay đổi.Để thiết lập điều này, thay vào đó, hãy sử dụng return window.history.pushState(null, null, target); để thêm url vào ngăn xếp lịch sử theo cách thủ công.

Xong!

ghi chú khác:

1) sử dụng phương pháp .on là mới nhất (tính đến tháng 1 năm 2015) phương pháp jquery đó là tốt hơn so với .bind hoặc .live, hoặc thậm chí .click vì lý do tôi sẽ để lại cho bạn để tìm hiểu .

2) Giá trị navOffset có thể nằm trong hàm hoặc bên ngoài, nhưng bạn có thể muốn nó ở bên ngoài, vì bạn có thể tham chiếu rất tốt không gian dọc cho các hàm khác/thao tác DOM. Nhưng tôi để nó bên trong để làm cho nó gọn gàng thành một chức năng.

Answer 4

$("#YOUR-BUTTON").on('click', function(e) { 
    e.preventDefault(); 
    $('html, body').animate({ 
     scrollTop: $("#YOUR-TARGET").offset().top 
    }, 300); 
}); 

Answer 5

tôi kết hợp nó, và đây là kết quả -

$(document).ready(function() { 
    $("#toTop").hide(); 

      // fade in & out 
     $(window).scroll(function() { 
        if ($(this).scrollTop() > 400) { 
         $('#toTop').fadeIn(); 
        } else { 
         $('#toTop').fadeOut(); 
        } 
       });  
    $('a[href*=#]').each(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
    && location.hostname == this.hostname 
    && this.hash.replace(/#/,'')) { 
     var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']'); 
     var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false; 
     if ($target) { 
     var targetOffset = $target.offset().top; 
     $(this).click(function() { 
      $('html, body').animate({scrollTop: targetOffset}, 400); 
      return false; 
     }); 
     } 
    } 
    }); 
}); 

Tôi đã thử nghiệm nó và nó hoạt động tốt. hy vọng điều này sẽ giúp một ai đó :)

Answer 6

Nếu bạn tải về jquery giảm bớt Plugin (check it out), sau đó bạn chỉ phải thêm video này vào tập tin main.js của bạn:

$('a.smooth-scroll').on('click', function(event) { 
    var $anchor = $(this); 
    $('html, body').stop().animate({ 
     scrollTop: $($anchor.attr('href')).offset().top + 20 
    }, 1500, 'easeInOutExpo'); 
    event.preventDefault(); 
}); 

và cũng không quên thêm smooth- lớp cuộn để thẻ một mình như thế này:

<li><a href="#about" class="smooth-scroll">About Us</a></li>