Question

我尝试使用返回功能使“返回顶部”按钮：

用户按下按钮
页面向上滚动
按钮不会消失
如果再次按下按钮，页面将向下滚动到用户第一次按下按钮的位置（步骤1）。

$(window).scroll(function() {
  if ($(this).scrollTop() > 50) {
    $('#back-to-top').fadeIn();
  } else {
    $('#back-to-top').fadeOut();
  }
});
// scroll body to 0px on click
$('#back-to-top').click(function() {
  $('#back-to-top').tooltip('hide');
  $('body,html').animate({
    scrollTop: 0
  }, 800);
  return false;
});

$('#back-to-top').tooltip('show');

.back-to-top {
  cursor: pointer;
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<a id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button" title="Click to return on the top page" data-toggle="tooltip" data-placement="left"><span class="glyphicon glyphicon-chevron-up"></span></a>


</div>
</div>

我该如何退货？

Answer 1

下面将介绍所有这些重要的UX情况：

用户手动上下滚动：如果滚动小于50，则按钮消失
用户向下滚动并单击“至顶部” ：页面会向顶部移动，并存储最后一个已知的最大位置。单击该按钮后始终保持可见状态。
用户单击“后退” ：页面将动画设置为最新的底部位置
用户单击“至顶部”，然后手动向下滚动，超过最新的已知最大位置：“后退”按钮自动重命名为“至顶部”-符合预期。
用户单击“到顶部”，手动超过最大位置，然后手动回滚到顶部：按钮的行为就像从未单击一样。
（如上所述，按钮会自动更改文本）

全部尝试：

const $win = $(window);
const $toTop = $('#back-to-top');
const visibleAt = 50;
let Y = 0;
let clickY = 0;

$win.on('scroll', function() {
  Y = $win.scrollTop();
  if(clickY && Y >= clickY) clickY = 0; // In case user surpasses the clickY by manual scroll
  $toTop
    .toggleClass('is-visible', !!clickY  || Y > visibleAt)
    .text(clickY ? 'Back down' : 'To top');
});

$toTop.on('click', function(evt) {
  evt.preventDefault();
  $('html, body').stop().animate({scrollTop: clickY ? clickY : 0});
  clickY = Y; // Store last click position
});

body {
  height: 400vh;
  border: 4px dashed #000;
}

#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  visibility: hidden;
  opacity: 0;
  transition: 0.24s;
  background: #0bf;
  user-select: none; /* prevent "button" text highlight */
}

#back-to-top.is-visible {
  visibility: visible;
  opacity: 1;
}

<a href="#top" id="back-to-top">To top</a>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

另外，您最好使用<button type="button" id="back-to-top">To top</button>而不是可拖动的锚点。

带返回功能的顶部按钮

1 个答案: