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