Простое смягчение в bootstrap scrollspy

Это довольно простой вопрос, я думаю, для тех, кто хорошо знает javascript/jquery. Я довольно новичок во всем этом и не мог сделать это. Я нашел код, который вычисляет смещение панели навигации, который выглядит так:

var offset = 50;

$('.navbar li a').click(function(event) {
event.preventDefault();
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);

});

А вот пример скрипки того, что у меня есть. Как вы можете видеть, если вы нажмете ссылку на панели навигации, она просто перейдет к разделу. Где в этом скрипте добавить 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();
});
});

javascript jquery twitter-bootstrap scrollspy easing
person Plavookac    schedule 03.10.2015    source источник
comment
Обязательно включите файлы scrolling-nav.js, jquery.easing.min.js и scrolling-nav.css. - от твоей скрипки....   -  person sinisake    schedule 03.10.2015
comment
@Nevermind Я сделал это внутри html-части скрипки. Но я думаю, что мне просто нужна простая строка кода, чтобы добавить смягчение, я просто не знаю, как добавить.   -  person Plavookac    schedule 03.10.2015

Ответы (1)


arrow_upward
4
arrow_downward

Plavookac Привет.
Я создал рабочий образец здесь, в Поиграйте для вас.
Когда вы разместите этот код на своей странице, разместите его под всеми другими ссылками на 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;
});

Это помогает?

person AngularJR    schedule 03.10.2015