bootstrap scrollspy簡單緩動

這是非常簡單的問題，我認爲那些誰知道JavaScript/jQuery好。我對這一切都很陌生，無法做到。我發現，在計算導航欄，看起來像這樣的偏移碼：bootstrap scrollspy簡單緩動

這裏是什麼，我有這麼遠fiddle example。正如你可以看到，如果你點擊導航欄中的鏈接，它只是跳到部分。在此腳本中添加easing的位置使其向下滾動更平滑一些？

隨着我發現的第一個原始代碼，我有了這個平滑的滾動，但新的腳本丟失。這是舊代碼：

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

來源

2015-10-03 Plavookac

「請確保包含滾動導航.js，jquery.easing.min.js和滾動導航.css文件。」 - 從你的小提琴... – sinisake

@nevermind我做了，在小提琴的HTML部分。但我想我只需要在這裏添加一些簡單的代碼行來添加緩動，我只是不知道如何添加。 – Plavookac

Plavookac您好。
我已經在這裏爲您設置了一個工作示例在這裏Fiddle。
當你把這段代碼放到你的頁面中時，把它放在你所有其他的js腳本鏈接下面。或者如果將它放在腳本鏈接中，請將鏈接放在末尾。我認爲你已經有了jQuery鏈接。

看看這裏的代碼，你會看到平滑的滾動和偏移量。

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

    // Add smooth scrolling on all links inside the navbar 
    $("#navbar 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 - 60 
    }, 800, function(){ 

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

注意這行代碼... event.preventDefault();這是用來防止閃爍時，首先點擊開始滾動。

這部分代碼將處理平滑滾動。

// 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 - 60 
    }, 800, function(){ 

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

這有幫助嗎？

來源

2015-10-03 23:37:49 AngularJR

bootstrap scrollspy簡單緩動

回答

相關問題