滚动到顶部详解

一、滚动到顶部JS

JavaScript是实现滚动到顶部的一种常见方式。我们可以利用浏览器提供的API获取页面的滚动高度，并设置为0，即可实现滚动到顶部的效果。

function scrollToTop() {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: 'smooth'
  });
}

其中，behavior属性控制滚动的行为，设置为"smooth"时可实现平滑滚动的效果。此方法可通过按钮触发。

二、滚动到顶部固定改变样式

实现滚动到顶部时改变页面元素样式也是一种常见需求。我们可以监听页面的滚动事件，并在滚动到一定高度时改变元素的样式。

<style>
.fixed-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
}
</style>

<button id="fixedBtn" class="fixed-btn">Scroll to top</button>

<script>
const fixedBtn = document.getElementById('fixedBtn');

window.addEventListener('scroll', () => {
  if (window.pageYOffset > 200) {
    fixedBtn.style.display = 'block';
  } else {
    fixedBtn.style.display = 'none';
  }
});

fixedBtn.addEventListener('click', scrollToTop);

function scrollToTop() {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: 'smooth'
  });
}
</script>

该示例通过固定按钮的方式实现滚动到顶部，并在滚动一定高度时将按钮显示出来。

三、滚动到顶部快捷

提供一些更为快捷的滚动到顶部的方式也是可以优化用户体验的。比如，我们可以在页面右侧提供一个“回到顶部”的小图标，用户点击即可跳转到顶部。

<style>
.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
}
</style>

<i id="scrollToTop" class="scroll-to-top" aria-hidden="true"></i>

<script>
const scrollToTop = document.getElementById('scrollToTop');

window.addEventListener('scroll', () => {
  if (window.pageYOffset > 200) {
    scrollToTop.style.display = 'block';
  } else {
    scrollToTop.style.display = 'none';
  }
});

scrollToTop.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});
</script>

该示例通过添加一个小图标，并通过CSS设置为固定在页面底部右侧的方式，实现了一个快捷的滚动到顶部的功能。

四、滚动到顶部怎么用

使用滚动到顶部的方法相对简单，在需要的位置调用即可。比如，在一个按钮的点击事件中，调用滚动到顶部的函数即可。

<button onclick="scrollToTop()">Scroll to top</button>

<script>
function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}
</script>

该示例在按钮的点击事件中调用scrollToTop()函数，实现了滚动到顶部的效果。

五、滚动到顶部怎么取消

如果我们不希望滚动到顶部的功能出现在某些页面或者特定条件下时，可以通过取消事件监听的方式达到该目的。

const fixedBtn = document.getElementById('fixedBtn');
const disableScrollToTop = true; //设置为true时禁用滚动到顶部

if (!disableScrollToTop) {
  window.addEventListener('scroll', () => {
    if (window.pageYOffset > 200) {
      fixedBtn.style.display = 'block';
    } else {
      fixedBtn.style.display = 'none';
    }
  });

  fixedBtn.addEventListener('click', scrollToTop);

  function scrollToTop() {
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: 'smooth'
    });
  }
} else {
  window.removeEventListener('scroll');
  fixedBtn.removeEventListener('click', scrollToTop);
}

该示例通过设置disableScrollToTop变量为true，禁用了滚动到顶部的效果，同时通过removeEventListener移除了事件监听器。

六、滚动到顶部快捷苹果手机

在苹果手机上，我们可以使用WebKit的内置属性 -webkit-overflow-scrolling:touch，使得滑动页面时具有惯性效果，并且在快速滑动时可以快速滚动到页面顶部。

body {
  -webkit-overflow-scrolling: touch;
}

该示例直接在body元素的样式中添加-webkit-overflow-scrolling:touch属性即可实现滚动到页面顶部的效果。

七、滚动到顶部实现方法

除了JavaScript实现滚动到顶部的效果外，还可以利用CSS3中的一些新属性和伪类实现类似效果。

<style>
.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .5s;
}

.scroll-to-top:hover {
  opacity: .5;
}

.scroll-to-top:before {
  content: "Top";
  display: inline-block;
  margin-right: 5px;
}
</style>

<button id="scrollBtn" class="scroll-to-top"></button>

<script>
const scrollBtn = document.getElementById('scrollBtn');

window.addEventListener('scroll', () => {
  if (window.pageYOffset > 200) {
    scrollBtn.style.opacity = 1;
  } else {
    scrollBtn.style.opacity = 0;
  }
});

scrollBtn.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});
</script>

该示例通过CSS3的opacity属性实现了滚动到顶部按钮的淡入淡出效果，并通过:before伪类添加了“Top”文本，增加了可读性。

八、苹果滚动手势滚动到顶部

iOS中提供了一种在页面滑动到顶部时自动出现“回到顶部”按钮的手势。我们只需要在页面中设置scroll-view的属性，即可使用该手势。

<scroll-view scroll-to-top="{{true}}">
  //页面内容
</scroll-view>

该示例在scroll-view组件中设置了scroll-to-top属性为true，即开启了在滚动到顶部时自动出现“回到顶部”按钮的手势效果。

九、苹果手机取消滚动到顶部

在特定场景下，我们可能需要禁用苹果手机自带的滚动到顶部手势效果。我们可以通过设置CSS样式的方式达到该目的。

body {
  -webkit-scroll-snap-stop: always;
}

该示例通过在body元素的样式中添加-webkit-scroll-snap-stop:always属性，禁用了苹果手机自带的滚动到顶部手势效果。