jQuery的頁面加載

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

它的工作太棒了，除了一兩件事，我希望它在有人直接訪問網址的情況下工作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; 
}); 

所有你需要在這個腳本做的是與控制的一類或ID，以取代 「MyClass的」位於您要滾動到的頁面上。

函數naveed

Answer 4

@魔爪後...

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

我2，但我不得不做出一些更改。

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

1.爲什麼要替換「/」？

對我來說，它使網址...

的 「http：// [我的域名]/[我的頁面]/[我的錨]」 ......像......

「HTTP：/ [我的域名]/[我的頁面]/[我的錨]」

和...

2.瀏覽器（我目前的版本：40.0.2214.115米）不喜歡以下線...

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

未捕獲的錯誤：語法錯誤，無法識別的表達式：HTTP：/ [我的域名]/[我的頁面]/[我的錨]

我發現jQuery的不能以 「抵消」 工作的時候「目標「是一個完整的href像http：// ... /＃錨。

修復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的非常新...

THX @Talon