jquery 滚动到特殊功能除外 link

Question

这是代码，link

$('a[href^="#"]').on("click", function() {
    var target = $($(this).attr("href") );
    if(target.length) {
     $("html, body").animate({scrollTop: target.offset().top}, 500);
   }
});

一个简单的滚动功能，有时点击#top 不会完全滚动到顶部，也许其他功能在顶部延迟了，我尝试 $("html, body").animate({ scrollTop: 0 }, "500"); 完美，我有两个问题

如果我需要#top 不影响此功能，如何检查 href="#" 而不是 #top？
我需要点击#top然后执行此$("html, body").animate({ scrollTop: 0 }, "500");，而不是scrollTop: target.offset().top的功能，有什么简单的方法可以做到这一点吗？

非常感谢

Answer 1

检查 href 是否不等于“#top”。你可以这样做

$('a[href^="#"]').on("click", function() {
    var target = $($(this).attr("href") );
    if(target.length && $(this).attr("href") != '#top') {
     $("html, body").animate({scrollTop: target.offset().top}, 500);
    }else{
     $("html, body").animate({scrollTop: 0}, 500);
    }
});

这是一个demo

Answer 2

您可以使用 jquery.scrollTo 插件，方法如下：

<!-- Include jQuery from somewhere, must use version 1.8 or above -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Include latest jquery.scrollTo, currently 2.1.0, can download from https://github.com/flesler/jquery.scrollTo/releases -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.scrollto/2.1.0/jquery.scrollTo.min.js"></script>
<!-- Initialize the scroll on click, this can go in a js file instead of inline of course -->
<script type="text/javascript">
  // You can avoid the document.ready if you put the script at the bottom of the page
  $(document).ready(function() {
    $('a[href^="#"]').click(function(e) {
      // Prevent the jump and the #hash from appearing on the address bar
      e.preventDefault();
      // Scroll the window, stop any previous animation, stop on user manual scroll
      // Check https://github.com/flesler/jquery.scrollTo for more customizability
      var dest = this.hash === '#top' ? 0 : this.hash;
      $(window).stop(true).scrollTo(dest, {duration:1000, interrupt:true});
    });
  }); 
</script>

这应该可以帮助您实现它。

jquery 滚动到特殊功能除外 link

jquery scroll to function except special link

jquery

scroll

scrollto