Question

我在WordPress网站中实现了“返回顶部”或“滚动至顶部”按钮，该按钮运行良好：

jQuery(document).ready(function($) {
  var offset = 500;
  var speed = 10;
  var duration = 250;

  $(window).scroll(function() {
    if ($(this).scrollTop() < offset) {
      $('.topbutton').fadeOut(duration);
    } else {
      $('.topbutton').fadeIn(duration);
    }
  });

  $('.topbutton').on('click', function() {
    $('html, body').animate({
      scrollTop: 0
    }, speed);
    return false;
  });
});

我的困境是我找不到一种根据浏览器宽度| height将var offset更改为灵活值的方法。因此，浏览器/设备屏幕越窄，500px触发点的位置越靠后，导致“返回顶部”按钮显示得太晚。这是我的CSS：

.site-footer {
  background-color: #0a0a0a;
}

.topbutton {
  height: 100px;
  width: 100px;
  position: fixed;
  right: 5px;
  bottom: 5px;
  z-index: 1;
  background-image: url("https://sheknowsphotography.co.za/wp-content/uploads/2018/12/Arrow-up-blue-ezgif.com-resize.gif");
  background-repeat: no-repeat;
  display: none;
}

这是footer.php内的gif图片，位于</body>标记之前：

<?php wp_footer(); ?>
<a href="#" class="topbutton"><img src="https://sheknowsphotography.co.za/wp-content/uploads/2018/12/Arrow-up-blue-ezgif.com-resize.gif"></a>

一切都以儿童为主题。

回复任何人：谢谢您的时间！

Answer 1

有效的解决方案：

202 Accepted

回页首滚动浏览器宽度和高度的var偏移量

1 个答案: