Question

我有一个固定的标题，其中有一些链接。现在，这个代码几乎是我需要它工作的地方，主要问题是执行第二个函数时会出现延迟。当点击绑定元素时，它实现了滚动到页面顶部的预期目的，但是在以指定速度继续之前，它首先缓慢地执行。我确定还有一种方法可以将其干掉并将其转换为单个功能而不是两个单独的功能。任何帮助将不胜感激。

$(function() {
  $("[href^='#']").on("click", function( e ) {  
    $("body, html").animate({ 
      scrollTop: $( $(this).attr('href') ).offset().top-$('.header').height()-$('.header').outerHeight()
    }, 800); 
    e.preventDefault();
  });    
});


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

JSFiddle - http://jsfiddle.net/9by4n5cu/1/

Answer 1

您可以合并两个函数，如bellow，

  $(function() {
    $("[href^='#']").on("click", function( e ) {  

      var target = $(this).attr('href');

      var scrollTop = $( target ).offset().top-$('.header').height()-$('.header').outerHeight();

      if ( target =='#home'){
         scrollTop = 0;
      }

      $("body, html").animate({
              scrollTop: scrollTop
          }, 800);

      e.preventDefault();


    });

  });

演示： http://jsfiddle.net/ibrahim12/9by4n5cu/3/

Answer 2

它因为你触发animate两次而延迟了，所以就像你说的那样，你需要将function合并为一个这样的

$(function () {
    $("[href^='#']").on("click", function (e)  {
        var link = $(this);
        var $header = $('.header')
        var top = link.attr("id") == "home" ? 0 : $(link.attr('href')).offset().top - $header.height() - $header.outerHeight()

        //$("html").animate({

        $("body, html").animate({    // Use $("body, html") to work on all browser as noted by Ibrahim
            scrollTop: top
        }, 800);
        e.preventDefault();
    });
});

我使用第一个点击功能，然后检查点击的link的ID是home，如果是，则将top设置为0，否则执行像以前一样计算。

此处更新的 ~~Fiddle~~ Fiddle

Navbar特定的jQuery Scroll Animation

2 个答案: