Question

我的网页底部有一个按钮，点击后会滚动回到页面顶部。这很有效，可以在我的demo here中看到。

我的网站中有一个抽屉的另一个问题，当抽屉被打开时整个页面一直跳起来 - 为了解决这个问题，我需要将overflow:auto;应用到html,body并修复问题

但是在这个过程中它停止了我的回到顶部按钮的工作。我想知道是否有人能够解释为什么或者是否有一个简单的解决方案，我只是想不出来？

要查看我的问题，只需取消注释我的演示CSS中的overflow:auto。

更新

感谢下面的一些建议，只需overflow:auto body html修复除桌面版Safari之外的所有内容的问题 - 任何人都有任何线索如何解决这个问题？

var offset = 300,
  scroll_top_duration = 700,
  $back_to_top = $('.top');

// Smooth scroll to top
$back_to_top.on('click', function(event) {
    event.preventDefault();
    $('body,html').animate({
      scrollTop: 0,
    }, scroll_top_duration
  );
});

Answer 1

似乎它不喜欢在html元素上溢出。这是一个小提琴： http://jsfiddle.net/330zyny7/2/

将溢出物移到身体上固定它。

＆＃13;

var offset = 300,
scroll_top_duration = 700,
$back_to_top = $('.top');

// Smooth scroll to top
$back_to_top.on('click', function(event) {
  event.preventDefault();
  alert();
  $('body,html').animate(
{scrollTop: 0, }, 
scroll_top_duration
  );
});

＆＃13;

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

body{
  overflow:auto; 
}

.page-wrapper {
  position: relative;
  height: 1000px;
}

h3 {
  position: absolute;
  bottom: 0;
}

＆＃13;

<div class="page-wrapper">
  <p>Top - scroll to the bottom to click 'back to top'</p>
  <h3>
<a href="#" class="top">Back to top</a>
  </h3>
</div>

＆＃13;

溢出：自动打开html，身体破坏jQuery .animate滚动到顶部？

1 个答案: