Question

我有一个按钮，单击该按钮时应平滑滚动到顶部。平滑过渡不起作用。实时网站。 -> http://acetronaut.com

这里也是一个Codepen。不工作https://codepen.io/anon/pen/LBpWrv

HTML：

<a class="scrolltotop" href="#">

    <button>Scroll To Top</button>

</a>

CSS：

.scrolltotop {

background: #000;
position: fixed;
bottom: 0;
right: 0;
color: #fefefe;
transition: all 300ms ease;

}

jQuery：

$(window).scroll(function() {
  if ($(this).scrollTop() > 100) {
    $('.scrolltotop').fadeIn();
  } else {
    $('.scrolltotop').fadeOut();
  }
});

$('.scrolltotop').on('click', function(e) {
  e.preventDefault();
  $('html, body').animate({scrollTop : 0}, 800);
});

Answer 1

您的控制台日志中出现错误“ TypeError：$不是函数”。请在以下位置编写您的代码：-jQuery(document).ready(function($){}。它可以解决您的问题。

Answer 2

您的代码工作正常，请添加JQuery CDN

$(window).scroll(function() {
  if ($(this).scrollTop() > 100) {
    $('.scrolltotop').fadeIn();
  } else {
    $('.scrolltotop').fadeOut();
  }
});

$('.scrolltotop').on('click', function(e) {
  e.preventDefault();
  $('html, body').animate({scrollTop : 0}, 800);
});

.scrolltotop {

background: #000;
position: fixed;
bottom: 0;
right: 0;
color: #fefefe;
transition: all 300ms ease;

}

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

<a class="scrolltotop" href="#">
<button>Scroll To Top</button>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis pellentesque gravida. Donec laoreet semper augue, vel tincidunt augue volutpat tincidunt. Sed porttitor tellus nibh, ac tempus est malesuada quis. Mauris eu magna nec tortor rhoncus porta. Nullam euismod ante ac elit varius, ac lacinia turpis accumsan. Vestibulum nec nisi id nulla pretium lacinia at ut dui. Nam convallis semper tincidunt. Duis rutrum tempus est id rhoncus. Proin molestie mi pretium enim volutpat consequat vitae dapibus quam. Vestibulum vehicula egestas elementum. Morbi scelerisque ligula a ullamcorper cursus. Quisque ac porta ligula, nec egestas ipsum. Nulla malesuada mi nec nibh blandit varius. Aliquam consequat non dui vitae suscipit. Donec accumsan, ante non scelerisque molestie, ex ligula faucibus nibh, vel blandit neque magna eget massa.

In lorem augue, varius eget eleifend vitae, ornare a augue. Praesent semper consequat ligula, vitae maximus elit mattis non. Praesent consequat metus risus, in aliquet velit convallis a. Donec ac velit nec sapien efficitur tincidunt ut sit amet justo. Vivamus sed purus rutrum, congue nisl id, elementum nunc. Aliquam viverra, dolor ac posuere varius, neque ex dictum nulla, eget venenatis libero arcu in odio. Sed eget erat mauris. Aliquam condimentum ex gravida interdum sodales. Nunc id arcu at lectus efficitur ullamcorper efficitur et felis. Nunc sit amet purus eu sapien auctor pulvinar. Nullam nec luctus turpis. Donec a lorem vulputate, porttitor est ac, blandit augue. Fusce ut tellus ut ipsum elementum dapibus.

Aenean pretium sagittis massa, et consectetur enim imperdiet vel. Quisque fermentum dictum lectus, at ornare justo consectetur et. Curabitur rutrum elit non mauris tempor, sed laoreet ipsum sollicitudin. Nulla odio nibh, laoreet in maximus vitae, egestas non felis. Nulla vitae lacus sollicitudin, ornare nisl at, dapibus mi. Curabitur sollicitudin vehicula elit vel eleifend. Aliquam in lacinia tellus, at vestibulum mi. Duis tellus dolor, rhoncus vitae ex eget, pharetra mattis turpis. Suspendisse laoreet purus quis orci malesuada hendrerit a eget ipsum. Aenean vestibulum, lacus accumsan faucibus elementum, mauris nunc rhoncus ante, cursus gravida mauris felis at nisl. Phasellus dapibus ac est vel molestie. Sed urna erat, gravida ac orci id, euismod pulvinar turpis. In tincidunt lacus libero, iaculis imperdiet lacus aliquam sit amet. Aliquam condimentum ligula elit, a porta massa sagittis nec. Nulla tincidunt, nisi sed consequat aliquet, purus velit placerat enim, quis iaculis magna felis nec tortor.

Nulla fringilla egestas massa, sit amet lacinia lacus dictum porttitor. Ut in ullamcorper orci, sed efficitur leo. Etiam et arcu sollicitudin, vulputate nulla ac, faucibus urna. Vestibulum non congue tellus. Suspendisse porttitor, nisl vel posuere auctor, leo orci lobortis neque, vel porttitor neque dolor et quam. Donec diam felis, congue non magna consequat, ultrices finibus nunc. Nunc pellentesque neque id magna mollis, non gravida orci aliquam. In elementum purus congue, iaculis lorem non, vehicula velit. Cras diam lorem, aliquet in tempor ut, gravida eu erat. Phasellus dolor est, blandit vel ornare ac, tincidunt nec felis. Morbi nec nulla aliquet, ultricies tortor sit amet, finibus neque. Suspendisse potenti. Nullam sed dictum arcu. Quisque dapibus rhoncus felis, quis hendrerit turpis fermentum at.

Ut vehicula leo dui, sed bibendum metus venenatis eget. Pellentesque sodales leo eget magna volutpat mollis. Curabitur congue dui vel purus imperdiet ornare. Aliquam turpis massa, varius a imperdiet sed, finibus ac enim. Sed tincidunt a lectus in hendrerit. Sed accumsan, sem sit amet mattis dapibus, leo lectus mattis erat, nec ultrices tellus ligula a magna. Integer elementum mattis pretium. Sed ex mi, porta sit amet efficitur ut, consectetur in mi. Nullam interdum efficitur vehicula. Integer maximus eget odio id accumsan.

Ut vehicula leo dui, sed bibendum metus venenatis eget. Pellentesque sodales leo eget magna volutpat mollis. Curabitur congue dui vel purus imperdiet ornare. Aliquam turpis massa, varius a imperdiet sed, finibus ac enim. Sed tincidunt a lectus in hendrerit. Sed accumsan, sem sit amet mattis dapibus, leo lectus mattis erat, nec ultrices tellus ligula a magna. Integer elementum mattis pretium. Sed ex mi, porta sit amet efficitur ut, consectetur in mi. Nullam interdum efficitur vehicula. Integer maximus eget odio id accumsan.</p>

滚动到顶部，平滑过渡不起作用

2 个答案: