javascript - 不同浏览器宽度|高度的滚动变量偏移量

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;
  });
});

我的困境是我找不到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>

一切都在儿童主题中完成。

对任何回应的人：谢谢您的时间！

标签： javascriptjquery

Answer 1

有效的解决方案：

jQuery(document).ready(function($){
	if ($(window).width() < 960) {
   var offset = 500;
	}
	else {
		var offset = 1000;
	}
    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;
		});
});