jQuery Płynne przewijanie na wczytywania strony

Question

używam tego skryptu jQuery zrobić Płynne przewijanie (Znalezione na CSS-Tricks.com):

/** Smooth Scrolling Functionality **/ 
jQuery(document).ready(function($) { 
    function filterPath(string) { 
    return string 
    .replace(/^\//,'') 
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'') 
    .replace(/\/$/,''); 
    } 
    var locationPath = filterPath(location.pathname); 
    var scrollElem = scrollableElement('html', 'body'); 
    var urlHash = '#' + window.location.href.split("#")[1]; 

    $('a[href*=#]').each(function() { 
    $(this).click(function(event) { 
    var thisPath = filterPath(this.pathname) || locationPath; 
    if ( locationPath == thisPath 
    && (location.hostname == this.hostname || !this.hostname) 
    && this.hash.replace(/#/,'')) { 
     var $target = $(this.hash), target = this.hash; 
     if (target) { 
     var targetOffset = $target.offset().top; 
      event.preventDefault(); 
      $(scrollElem).animate({scrollTop: targetOffset}, 400, function() { 
      location.hash = target; 
      }); 
     } 
    } 
    }); 
    }); 

    // use the first element that is "scrollable" 
    function scrollableElement(els) { 
    for (var i = 0, argLength = arguments.length; i <argLength; i++) { 
     var el = arguments[i], 
      $scrollElement = $(el); 
     if ($scrollElement.scrollTop()> 0) { 
     return el; 
     } else { 
     $scrollElement.scrollTop(1); 
     var isScrollable = $scrollElement.scrollTop()> 0; 
     $scrollElement.scrollTop(0); 
     if (isScrollable) { 
      return el; 
     } 
     } 
    } 
    return []; 
    } 

}); 
/** END SMOOTH SCROLLING FUNCTIONALITY **/ 

Działa fantastyczne, z wyjątkiem jednej rzeczy, chcę go do działa tam, gdzie ktoś podchodzi bezpośrednio pod adres URL, np http://domain.com/page.html#anchor płynnie przewija do tej kotwicy od góry na stronie ładowania, teraz natychmiast przechodzi do zakotwiczenia strony, chyba że kliknęli na kotwicę. Mam nadzieję, że ma to sens.

Answer 1

Można to zrobić za pomocą .scrollTop()

$('a').click(function(){ 
    $('html, body').animate({ 
     scrollTop: $($.attr(this, 'href')).offset().top 
    }, 2000); 
    return false; 
}); 

SEE HERE

Answer 2

I okazało się, że najlepszym sposobem, aby robić to, co chcę tak daleko:

/** Smooth Scrolling Functionality **/ 
var jump=function(e) 
{ 
    //alert('here'); 
    if (e){ 
     //e.preventDefault(); 
     var target = jQuery(this).attr("href").replace('/', ''); 
    }else{ 
     var target = location.hash; 
    } 

    jQuery('html,body').animate(
    { 
     scrollTop: (jQuery(target).offset().top) - 100 
    },500,function() 
    { 
     //location.hash = target; 
    }); 

} 

jQuery('html, body').hide(); 

jQuery(document).ready(function($) 
{ 
    $(document).on('click', 'a[href*=#]', jump); 

    if (location.hash){ 
     setTimeout(function(){ 
      $('html, body').scrollTop(0).show(); 
      jump(); 
     }, 0); 
    }else{ 
     $('html, body').show(); 
    } 
}); 
/** END SMOOTH SCROLLING FUNCTIONALITY **/ 

Answer 3

Jeśli nie jest zbyt spóźniony na odpowiedź, a następnie proszę .... Oto modyfikacja kodu PSR, który działa w celu płynnego przewijania strony pod obciążeniem:

http://jsfiddle.net/9SDLw/1425/

$(function(){ 
    $('html, body').animate({ 
     scrollTop: $($('#anchor1').attr('href')).offset().top 
    }, 2000); 
    return false; 
}); 

Lepsza wersja:

http://jsfiddle.net/9SDLw/1432/

$(function(){ 
    $('html, body').animate({ 
     scrollTop: $('.myclass').offset().top 
    }, 2000); 
    return false; 
}); 

Wszystko, co trzeba zrobić w tym skrypcie jest zastąpienie "MojaKlasa" z klasy lub identyfikatora kontroli znajduje się na stronie, którą chcesz przewinąć.

Naveed

Answer 4

@ Talons postu ...

I found this to be the best way to do what I want so far:

Me 2, ale musiałem dokonać pewnych zmian.

var target = jQuery(this).attr("href").replace('/', ''); 

1. Dlaczego warto wymienić "/"?

W moim przypadku to sprawia, że ​​adres URL ...

"http: // [moja domena]/[moja strona]/[moja kotwica]" ... wyglądać ...

"http:/[moja domena]/[moja strona]/[moja kotwica]"

i ...

2. Chrome (moja obecna wersja: 40.0.2214.115 m) nie lubi następująca linia ...

jQuery('html,body').animate(
    { 
     scrollTop: (jQuery(target).offset().top) - 100 
    },500,function() 
    { 
     //location.hash = target; 
    }); 

Uncaught Error: Błąd składni, nierozpoznany wyrażenie: http:/[moja domena]/[moja strona]/[moja kotwica]

I okazało się, że jQuery nie może pracować z "offset" kiedy " target "jest pełnym href, takim jak http: // .../# anchor.

naprawić 1.

zastąpić:

var target = jQuery(this).attr("href").replace('/', ''); 

z:

var target = jQuery(this).attr("href"); 

naprawić 2.

zastąpić:

jQuery('html,body').animate(
    { 
     scrollTop: (jQuery(target).offset().top) - 100 
    },500,function() 
    { 
     //location.hash = target; 
    }); 

z:

if(target.search('/') === -1) { //only do scroll if page with anchor is the currently loaded page 
    jQuery('html,body').animate(
    { 
     scrollTop: (jQuery(target).offset().top) - 100 
    },500"easeInOutExpo"); // requires easing 
} 

teraz działa idealnie dla mnie, bez żadnych błędów. Prosimy o komentarz na ten jeden, bo jestem całkiem nowy w js/jquery ...

thx @Talon