平滑的滚动和返回与Firefox上的popState按钮 - 需要点击两次 [英] smooth scrolling and get back button with popState on Firefox - need to click twice

问题描述

我试图实现一个小代码，当我点击锚点时（锚名称出现在动画之后），我可以平滑地滚动，如果按下后退按钮，我想返回页面的顶部浏览器和更新URL（没有#anchor名字）。

这里的代码：

  $（function（）{
 //点击锚点时平滑滚动
 $（'a [href * =＃]：not（[href =＃]）'） .click（function（event）{
 event.preventDefault（）; 
 if（location.pathname.replace（/ ^ \ //，''）== this.pathname.replace（/ ^ \ //，''）&&& location.hostname == this.hostname）{
 var target = $（this.hash）; 
 target = target.length？target：$（ （'target.length）{
 var hash = this.hash; 
 $（'html （{scrollTop：target.offset（）。top  -  55}，300，function（）{
 location.hash = hash; 
 href = window.location.href; 
 history.pushState（{page：href}，null，href）; 
}）; 
返回false; 
} 
} 
}）; 
 //获得平滑的滚动到浏览器顶部的返回按钮
 $（window）.bind（'popstate'，function（event）{
 var state = event.originalEvent.state; 
 var target = window.location.href.split（'＃'）; 
 var href = target [0]; 
 if（state）{
 $（'html， （{scrollTop：0}，300，function（）{
 window.location.href = href; 
}）
} 
}）; 
 $ b $ //第一页加载
 window.onload = function（）{
 history.replaceState（{path：window.location.href}，''）; 
} 
}）; 
  

以上所有功能在Safari和Chrome下均可正常工作。但是Firefox并非如此：一旦顺利滚动下来，我需要点击两次返回按钮重定向页面顶部。

我有看到这个在stackoverflow上的其他问题，并试图做和不使用event.preventDefault，也只是把：

  $（'html'）。animate 
  

或 $（'body'）。animate

但行为是一样的。

谢谢

$ b

所以，我对你的代码进行了一些修改，现在它在我的FF中运行。

在点击处理程序中， / p>

  $（'html'）。animate（{scrollTop：target.offset（）。top  -  55}，300，function ）{
 href = window.location.href; 
 history.pushState（{page：href}，null，href.split（'＃'）[0] + hash）; 
} ）; 
  

另外，它好像是 $（'html，body'）。animate 会执行两次回调，因此会与历史记录混淆。这就是为什么我只留下html。

在popstate处理程序中，我删除了页面重新加载，但是如果您愿意，可以保留它：

  if（state）{
 $（'html，body'）。animate（{scrollTop：0}，300）
  

I'm trying to implement a small code with which I can get smooth scrolling when I click on anchor (and anchor name appears after animation) and I would like to return to the top of page if I push on the back button of the browser and update the URL (without #anchor name).

Here's the code :

$(function() {
  // Smooth scrolling when clicking on anchor
  $('a[href*=#]:not([href=#])').click(function(event) {
    event.preventDefault();
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        var hash = this.hash; 
        $('html,body').animate({ scrollTop: target.offset().top - 55}, 300, function() {
          location.hash = hash;
          href = window.location.href;
          history.pushState({page:href}, null, href);
        });
        return false;
      }
    }
  });
  // Get smooth scrolling to the top whith back button of browser
  $(window).bind('popstate', function(event) {
    var state = event.originalEvent.state;
    var target = window.location.href.split('#');
    var href = target[0];
    if (state) {
      $('html,body').animate({ scrollTop: 0 }, 300, function() {
        window.location.href = href;
     })
   }
  });

  // First page loading
  window.onload = function() {
    history.replaceState({ path: window.location.href }, '');
  }
});

All the above functionalities work well under Safari and Chrome. But this is not the case with Firefox: once smooth scrolling down is performed, I need to click twice on back button to be redirected on the top of page.

I have seen this other question on stackoverflow and tried to do with and without event.preventDefault, also by putting only :

$('html').animate

or $('body').animate

but the behavior is the same.

If someone could see why it doesn't work.

Thanks

解决方案

You are triggering additional history change in this line location.hash = hash;

So, I did a couple of changes to your code, and it works in my FF now.

In click handler,

   $('html').animate({ scrollTop: target.offset().top - 55}, 300, function() {
      href = window.location.href;
      history.pushState({page:href}, null, href.split('#')[0]+hash);
    });

Also, it seems like $('html,body').animate runs callback twice, therefore messing with history. That's why I left only html.

In popstate handler I removed page reload, but you can keep it, if you wish:

if (state) {
  $('html,body').animate({ scrollTop: 0 }, 300)

这篇关于平滑的滚动和返回与Firefox上的popState按钮 - 需要点击两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！