jQuery实现带有动画效果的回到顶部和底部代码

首先我们需要明确一下，什么是回到顶部和底部的功能？很简单，就是当用户在滚动页面的时候，有一个按钮可以一键返回页面的顶部或底部，方便用户阅读和操作页面。而其中带有动画效果则是为了让页面更加流畅。

现在我们来详细讲解如何使用jQuery实现这个功能。

一、HTML结构

首先我们需要定义一个按钮，在页面底部右下角，当用户滚动页面到一定程度之后，按钮出现。

<a id="back-to-top" href="#">Top</a>

二、CSS样式

为按钮添加CSS样式，包括位置、大小、颜色等。

#back-to-top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  font-size: 24px;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: red;
  color: white;
}

三、jQuery代码

下面是实现回到顶部和底部的jQuery代码：

$(document).ready(function(){
  $(window).scroll(function(){
    if ($(this).scrollTop() > 100) {
      $('#back-to-top').fadeIn();
    } else {
      $('#back-to-top').fadeOut();
    }
  });
  $('#back-to-top').click(function(){
    $('html, body').animate({scrollTop : 0},800);
    return false;
  });
  $('#back-to-bottom').click(function(){
    $('html, body').animate({scrollTop : $(document).height()},800);
    return false;
  });
});

首先，我们在页面加载完成后通过$(document).ready()方法来执行代码。

然后，我们通过$(window).scroll()方法来监听页面滚动事件，当滚动距离大于100时，显示返回顶部按钮，否则隐藏。

当用户点击返回顶部按钮时，调用animate()方法，将滚动条滚动到顶部位置，这里我们采用了800毫秒的动画效果来使页面流畅。

同样的，当用户点击返回底部按钮时，调用animate()方法，将滚动条滚动到底部位置。

四、示例

下面我们来看两个示例：一个是回到顶部，一个是回到底部。

示例一：回到顶部

首先，我们需要定义一个按钮，在页面底部右下角，当用户滚动页面到一定程度之后，按钮出现。

<a id="back-to-top" href="#">Top</a>

然后，我们需要添加CSS样式。

#back-to-top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  font-size: 24px;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: red;
  color: white;
}

最后，我们需要添加jQuery代码。

$(document).ready(function(){
  $(window).scroll(function(){
    if ($(this).scrollTop() > 100) {
      $('#back-to-top').fadeIn();
    } else {
      $('#back-to-top').fadeOut();
    }
  });
  $('#back-to-top').click(function(){
    $('html, body').animate({scrollTop : 0},800);
    return false;
  });
});

这样，我们就实现了回到顶部的功能。

示例二：回到底部

同样的，我们需要定义一个底部按钮。

<a id="back-to-bottom" href="#">Bottom</a>

接着，我们需要添加CSS样式。

#back-to-bottom {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 100px;
  z-index: 999;
  font-size: 24px;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: blue;
  color: white;
}

最后，我们需要添加jQuery代码。

$(document).ready(function(){
  $(window).scroll(function(){
    if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
      $('#back-to-bottom').fadeIn();
    } else {
      $('#back-to-bottom').fadeOut();
    }
  });
  $('#back-to-bottom').click(function(){
    $('html, body').animate({scrollTop : $(document).height()},800);
    return false;
  });
});

这样，我们就实现了回到底部的功能。

总结：通过以上代码，我们可以实现带有动画效果的回到顶部和底部功能，使得用户操作更加方便和流畅。