Question

我在我的一个项目中使用了引导程序制作的主题，所以我决定将滚动到顶部的按钮移到另一个项目中，但是每当我将其放在另一个项目中时，它将无法正常工作。

// Back to top button
$(window).scroll(function() {
  if ($(this).scrollTop() > 100) {
    $(".back-to-top").fadeIn("slow");
  } else {
    $(".back-to-top").fadeOut("slow");
  }
});
$(".back-to-top").click(function() {
  $("html, body").animate({
    scrollTop: 0
  }, 1500, "easeInOutExpo");
  return false;
});

.back-to-top {
  position: fixed;
  display: none;
  background: #99aa37;
  color: #fff;
  width: 44px;
  height: 44px;
  text-align: center;
  line-height: 1;
  font-size: 16px;
  border-radius: 50%;
  right: 15px;
  bottom: 15px;
  transition: background 0.5s;
  z-index: 11;
}

.back-to-top i {
  padding-top: 12px;
  color: #fff
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTML:

<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>


<a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>

使用JS脚本对我来说一切似乎都还不错。我只需要一双新鲜的眼睛，也许我就错过了一些东西。

Answer 1

尝试一下

<!-- in HTML file -->
<h1 id="top">your text</h1>
    <a href="#top"class="back-to-top"><i class="fa fa-chevron-up"></i></a>



// in JS File
    $("a[href='#top']").click(function() {
          $("html, body").animate({ scrollTop: 0 }, "slow");
          return false;
        });

Answer 2

一切正常，我想您没有包含宽松库。您可以使用Easy Library来进行动画制作的特殊缓动，例如以下链接：Easing Functions

  $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
      $(".back-to-top").fadeIn("slow");
    } else {
      $(".back-to-top").fadeOut("slow");
    }
  });
  $(".back-to-top").click(function() {
    $("html, body").animate({ scrollTop: 0 }, 1500);
    return false;
  });

.back-to-top{
  position: fixed;
  display: none;
  background: #99aa37;
  color: #fff;
  width: 44px;
  height: 44px;
  text-align: center;
  line-height: 1;
  font-size: 16px;
  border-radius: 50%;
  right: 15px;
  bottom: 15px;
  transition: background 0.5s;
  z-index: 11;
  }

.back-to-top i{
  padding-top: 12px;
  color: #fff
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>
<h1> HEllo </h1>


<a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>

请阅读本文，特别是易用性部分：jQuery Animate

尝试使滚动到顶部按钮起作用

2 个答案: