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

Question

I implemented a "back to top" or "scroll to top" button in a WordPress site which works perfectly:

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

My dilemma is that I can't find a method to change the var offset to a flexible value according to browser width|height. Thus the narrower the browser/device screen, the further down the 500px trigger point occurs, causing the "back to top" button to appear too late. Here is my 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;
}

Here is the gif image inside the footer.php, just before the </body> tag:

<?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>

Everything is done in child theme.

To whoever responds: thank you for your time!

Answer 1

The solution that works:

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