JQuery Smooth Scrolling на загрузке страницы

Question

Я использую это JQuery скрипт, чтобы сделать плавную прокрутку (Найдено на 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 **/ 

Он работает фантастически, за исключением одной вещи, я хочу его работа, где, если кто-то переходит непосредственно к URL-адресу, например http://domain.com/page.html#anchor он плавно прокручивает этот якорь сверху загрузки страницы, прямо сейчас он сразу же переходит к привязке к странице, если только они не нажали на якорь. Я надеюсь, что в этом есть смысл.

Answer 1

можно сделать с помощью .scrollTop()

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

SEE HERE

Answer 2

Я нашел, что это лучший способ сделать то, что я хочу до сих пор:

/** 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

Если это не слишком поздно для ответа, то здесь вы идете .... Вот модификация кода PSR, который фактически работает для плавной прокрутки страницы при загрузке:

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

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

Лучше версия:

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

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

Все, что нужно сделать в этом сценарии должен заменить "MyClass" с классом или ID контроля расположенный на странице, которую вы хотите прокрутить.

Навид

Answer 4

@ Когти пост ...

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

Me 2, но я должен был сделать некоторые изменения к нему.

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

1. Почему заменить "/"?

В моем случае это делает URL ...

"HTTP: // [мой домен]/[моя страница]/[мой якорь]" ... похож ...

"HTTP:/[мой домен]/[моя страница]/[мой якорь]"

и ...

2. Хром (моя текущая версия: 40.0.2214.115 м) не нравится следующая линия ...

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

Uncaught Ошибка: Ошибка синтаксиса непризнанного выражение: HTTP:/[мой домен]/[моя страница]/[мой якорь]

я узнал, что Jquery не может работать с "смещением", когда " target "является полным href, как http: // .../# anchor.

исправить 1.

заменен:

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

с:

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

исправить 2.

заменен:

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

с:

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 
} 

теперь работает отлично для меня, без каких-либо ошибок. Просьба прокомментировать этот, потому что я довольно новое в JS/JQuery ...

ТНХ @Talon