jQuery在页面加载上平滑滚动

我正在使用这个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  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它从页面加载的顶部平滑滚动到该锚点,右现在它会立即进入页面锚点,除非他们点击了锚点。 我希望这是有道理的。

如果回答还不算太晚,那么你去….这是对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。

函数naveed

我发现这是迄今为止我想做的最好方法:

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

@ Talonspost……

我发现这是迄今为止我想做的最好方法:

我2,但我不得不做一些改变。

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

1.为什么要更换“/”?

在我的情况下,它使url…

“http:// [我的域名] / [我的页面] / [我的主播]”……看起来像……

“http:/ [我的域名] / [我的页面] / [我的主播]”

和…

2. Chrome(我当前版本:40.0.2214.115米)不喜欢以下线路…

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

未捕获错误:语法错误,无法识别的表达式:http:/ [我的域名] / [我的页面] / [我的主播]

我发现当“target”是像http:// … /#anchor这样的完整href时,jQuery无法使用“offset”。

修复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

你可以使用.scrollTop()

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

看这里