Question

我是一个jQuery新手。我在同一页面上有两个功能：

一个顺畅滚动到ID
另一个显示＆＃34;返回顶部＆＃34;用户滚动设定距离后的元素。

这些功能可以单独使用，但当我将它们组合起来时，如下图所示，＆＃34;返回顶部＆＃34;功能无效。

我想我错过了一些明显的东西并且可以使用一些帮助。谢谢！

更新：这个小提琴显示了问题：

back to top jsfiddle 如果禁用平滑滚动块，则返回顶部功能。

jQuery(document).ready(function(){

  //smooth scrolling
  $('a[href^="#"]').on('click',function (e) {
    e.preventDefault();
    var target = this.hash,
    $target = $(target);
    $('html, body').stop().animate({
    'scrollTop': $target.offset().top -150}, 900, 'swing', function () {
    window.location.hash = target;});
  });

// Show or hide the back to top footer button
  $(window).scroll(function() {
    if ($(this).scrollTop() > 200) {
      $('.go-top').fadeIn(200);
    } else {
      $('.go-top').fadeOut(200);
    }
  });

  // Animate the scroll to top
  $('.go-top').click(function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop: 0}, 900);
  });

});

Answer 1

您好@DavidCara只需添加

<div id="top"></div>

立即<body>标记之后，它会非常有效。

请参阅更新的jsfiddle Here

Answer 2

直接在html标签中使用这个简单的代码。

 <a onclick="$('html, body').animate({scrollTop: 0}, 900);" href="javascript:;">back to top </a>

scrollTop：平滑滚动到ID会干扰回到顶部

2 个答案: