jQuery在页面加载时平滑滚动

我使用这个jQuery脚本进行平滑滚动（可在CSS Tricks.com上找到）：

/**平滑滚动功能**/
jQuery（文档）.ready（函数（$）{
函数筛选器路径（字符串）{
返回字符串
.替换（/^\/，''）
.replace（/（索引|默认值）。[a-zA-Z]{3,4}$/，“”）
.替换（/\/$/，''）；
}
var locationPath=filterPath（location.pathname）；
var scrolleem=scrollableElement（'html'，'body'）；
var urlHash='#'+window.location.href.split（“#”）[1]；
$（'a[href*=#]'）。每个（函数（）{
$（此）。单击（函数（事件）{
var thisPath=filterPath（this.pathname）| | locationPath；
如果（locationPath==此路径
&&（location.hostname==this.hostname | |！this.hostname）
&&this.hash.replace（/#/，''）{
var$target=$（this.hash），target=this.hash；
如果（目标）{
var targetOffset=$target.offset（）.top；
event.preventDefault（）；
$（scrollElem）.animate（{scrollTop:targetOffset}，400，function（）{
location.hash=目标；
});
}
}
});  
});
//使用第一个“可滚动”的元素
函数可滚动元素（els）{
for（var i=0，argLength=arguments.length；i 0）{
返回el；
}否则{
$scrollElement.scrollTop（1）；
变量isScrollable=$scrollElement.scrollTop（）>0；
$scrollElement.scrollTop（0）；
如果（可循环使用）{
返回el；
}
}
}
返回[]；
}
});
/**结束平滑滚动功能**/

它工作得非常好，除了一件事，我希望它能在有人直接访问url的地方工作，例如

http://domain.com/page.html#anchor

在页面加载时，它会从顶部平滑地滚动到该定位点，现在它会立即转到页面定位点，除非他们单击了定位点。我希望这是有意义的。

您可以使用

---

到目前为止，我发现这是做我想做的事情的最佳方式：

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

---

如果现在回答还不算晚，那就给你。。。。 以下是对PSR代码的修改，它实际上可以在加载时平滑滚动页面：

更好的版本：

在这个脚本中，您只需将“myclass”替换为您要滚动到的页面上的控件的类或ID

Naveed

@Talons post

---

到目前为止，我发现这是做我想做的事情的最佳方式：

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

我2岁了，但我不得不对它做一些修改

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

1。为什么要替换“/？”

在我的例子中，它使url

“http://[my domain]/[my page]/[my anchor]”看起来像

“http://[my domain]/[my page]/[my anchor]”

而且

2。Chrome（我的当前版本：40.0.2214.115 m）不喜欢下面这行…

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

未捕获错误：语法错误，无法识别的表达式：http://[my domain]/[my page]/[my anchor]

我发现，当“target”是一个完整的href（如http://…/#anchor）时，jQuery无法使用“offset”

修复1。

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

取代：

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

与：

修复2。

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

取代：

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

与：

现在对我来说很完美，没有任何错误。 请对此发表评论，因为我对js/jquery还很陌生

---

thx@Talon

如今，您只需使用javascript即可滚动页面加载。我喜欢设置一个

setTimeout

，在滚动之前给它一些时间

if (window.location.hash) {
  var hash = window.location.hash;
  var element = document.querySelector(hash);
  
  if (element)
    element.scrollIntoView({
      behavior: "smooth",
      block: "nearest",
      inline: "start",
    });
}

---

这与我问题中的函数类似，但如果它们直接导航到域锚，则无法解决问题（如果他们在url中键入锚点，而不是平滑滚动到锚点，它会立即转到锚点。您可以使用动画that@Talon我现在更新了我的代码，请检查一下。它现在正在按照您的要求工作。不，不，真的很抱歉，它只在单击时激活，它需要在页面加载和单击时都激活。虽然这很好，但它没有直接回答问题。OP希望平滑滚动到url哈希中专门使用的id：

example.com/#example

这很好，但目前只是一个工作草案。由于Safari（macOS/iOS）还不支持平滑行为选项，尚未准备好用于生产网站。请参阅。希望苹果能尽快解决这个问题。

   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
}

if (window.location.hash) {
  var hash = window.location.hash;
  var element = document.querySelector(hash);
  
  if (element)
    element.scrollIntoView({
      behavior: "smooth",
      block: "nearest",
      inline: "start",
    });
}