2010-10-21 111 views
17

我有下面的滚动脚本,它滚动页面的罚款,我的工作方式也是如此。JQuery从浏览器顶部滚动到偏移量?

$(function(){ 
    $('a[href*=#]').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
     && location.hostname == this.hostname) { 
      var $target = $(this.hash); 
      $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']'); 
      if ($target.length) { 
       var targetOffset = $target.offset().top; 
       $('html,body').animate({scrollTop: targetOffset}, 1000); 
       return false; 
      } 
     } 
    }); 
}); 

不过,我需要它忽略上面说200像素,因为我在页面顶部的内容滚动背后有一个固定的头。

这意味着当我滚动到顶部它将内容滚动到固定标题后面,所以我不能看到它,所以我需要它滚动到正下方的标题..所以要将标题的底部作为顶部浏览器我想....

这可以做,因为它会很方便吗?

非常感谢所有帮助

+0

谢谢你问这个问题一直挣扎了一夜想了解如何完全相同的原因完成此操作! – Robert 2016-11-26 08:43:37

回答

26

会是这样的工作?

var targetOffset = $target.offset().top - 200; 

或者抓取额外偏移量的头元素的高度。

var targetOffset = $target.offset().top - $("element").outerHeight(true); 
1

你可以使用这样的事情,如果在我们的代码的条件这样做

//check if the absolute position is below header 
if ($('#IdOfTheScrollElement').position().top >= 200){ 
//scroll 
} 
else { 
//do nothing 
} 
+0

谢谢你们的帮助。我不知道他们是否工作,因为我无法弄清楚在哪里把它们放在代码中来产生效果,在雾气情况下,我只是打破了滚动:( – Jezthomp 2010-10-22 10:12:12

0

代码很好,你只需要在这里删除你的固定头的高度,例如,如果它是200px。它会完美地工作。

$('html,body').animate({scrollTop: (targetOffset().top)-200}, 1000); 

您还可以检查此当按钮被点击

$(function() { 

$('a[href*=#]:not([href=#])').click(function() { 

    // Check height of the header and padding 
    var header_height = $('.header').outerHeight(); 

从你删除它抵消

$('html,body').animate({scrollTop: (targetOffset().top) - header_height }, 1000);