Jak zrobić płynne przewijanie na stronie?

Question

Jestem w trakcie robienia strony i chciałem umieścić wszystkie zakładki (tj. Kontakt, o mnie itp.) na jednej stronie. Gdy ktoś klika załóżmy "O mnie" to przenosi go do odpowiedniego diva (<a href="#aboutme">O mnie</a>). I wszystko ładnie działa tylko nie wgląda za ładnie bo to przenoszenie jest kwadratowe; następuje taki skok. Chciałbym żeby to przewijanie do odpowiedniego diva było płynne. Pomoże ktoś?

Answer 1

Prosta instalacja, dobrze napisane :)

http://webroad.pl/javascript/182-jquery-plynne-przewijanie-strony

Answer 2

Problem polega na tym, że teraz to jest dostarczane albo przez przeglądarkę (Chrome), albo przez system operacyjny (Windows, MacOS X) i – w ostateczności – przez CSS.

Stąd własny skrypt JS, który zawsze będzie gorszy od natywnej implementacji, najlepiej serwować tylko jako polyfill dla CSS-a: http://codepen.io/Comandeer/pen/bEPbqg

Answer 3

Chodzi Ci zapewne o smooth scrolling? Tutaj masz przykładową pracę na github.com -> https://github.com/cferdinandi/smooth-scroll Tutaj masz demo -> http://cferdinandi.github.io/smooth-scroll/

Answer 4

U mnie nie działa a brackets zgłasza takie problemy.

ESLint (5)
1		ERROR: '$' is not defined. [no-undef]	$(document).on('click', 'a', function(event){
1		ERROR: 'document' is not defined. [no-undef]	$(document).on('click', 'a', function(event){
3		ERROR: '$' is not defined. [no-undef]	$('body').animate({
4		ERROR: '$' is not defined. [no-undef]	scrollTop: $($.attr(this, 'href')).offset().top
4		ERROR: '$' is not defined. [no-undef]	scrollTop: $($.attr(this, 'href')).offset().top
JSLint (5)
1		'$' was used before it was defined.	$(document).on('click', 'a', function(event){
1		Expected exactly one space between 'function' and '('.	$(document).on('click', 'a', function(event){
1		Expected exactly one space between ')' and '{'.	$(document).on('click', 'a', function(event){
1		Missing space between ')' and '{'.	$(document).on('click', 'a', function(event){
2		Missing 'use strict' statement.	event.preventDefault();