解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法

针对“解决js页面滚动效果scrollTop在Firefox与Chrome浏览器间的兼容问题”的问题，以下是完整的攻略：

问题描述

在开发网站过程中，经常会遇到使用JavaScript实现页面滚动效果时，在不同浏览器下滚动条的scrollTop属性值不同的兼容性问题，尤其是在Chrome与Firefox浏览器上。

解决方法

1. 使用jQuery的.scrollTop()方法

针对scrollTop值不同时，一个比较简单的解决办法是使用jQuery提供的scrollTop()方法，它会自动处理不同浏览器间的差异，从而获得统一的结果。代码示例如下：

$('html, body').animate({
  scrollTop: someValue
}, 1000);

其中，someValue表示要滚动到指定目标位置的scrollTop值。

1. 使用document.documentElement.scrollTop或document.body.scrollTop

另外一种解决方法是直接判断当前浏览器使用哪个属性来获取scrollTop值，然后进行操作。代码示例如下：

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

其中，pageYOffset是W3C标准中定义的获取滚动条垂直位置的属性，而document.documentElement.scrollTop和document.body.scrollTop则是IE6/7/8等浏览器特有的获取scrollTop值的属性。

示例说明

1. jQuery的.scrollTop()方法示例

如果要实现当用户在页面中点击一个标签后，页面向下滚动到某个位置，可以使用下面的代码：

$('.scrollToTargetBtn').click(function() {
  $('html, body').animate({
    scrollTop: $('.scrollTarget').offset().top
  }, 1000);
});

其中，scrollToTargetBtn是用户点击的标签，scrollTarget是需滚动到的页面元素。

1. document.documentElement.scrollTop或document.body.scrollTop示例

如果要实现当页面滚动到某个位置时，一组元素的样式发生改变，可以使用下面的代码：

var header = document.querySelector('.site-header');

window.addEventListener('scroll', function() {
  if ((window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop) > 100) {
    header.classList.add('sticky');
  } else {
    header.classList.remove('sticky');
  }
});

其中，当页面向下滚动超过100px时，应用样式sticky到.header元素上。