滚动到顶部平滑过渡不工作

Question

我有一个按钮，当点击应该平滑地滚动到顶部。平稳过渡并不奏效。现场网站。-->http://acetronaut.com

这里还有一个代码页。不管用。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

您的代码工作正常请添加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);
});

css prettyprint-override">.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>