2016-01-20 126 views
0

我知道这个问题很可能被问及解决了一千次,但我需要关于我的具体案例的建议。获取window.scrollTo(0,0);去工作

我在我的网站上设置了几个锚,我使用jquery在它们之间平滑滚动。我一直在使用一个#top锚点滚动到页面的顶部,它的工作原理。但问题是,如果我让按钮滚动到#top,它将不会滚动到页面的绝对顶部(因为我无法在网页上设置足够高的锚点)。

我试图让它与window.scrollTo(0, 0);命令一起工作,但我不知道如何让它工作,同时仍然有可能滚动到锚点。

我用下面的jQuery的锚滚动:

$(document).ready(function(){ 
    $('a[href^="#"]').on('click',function (e) { 
     e.preventDefault(); 
     var target = this.hash; 
     var $target = $(target); 

     $('html, body').stop().animate({ 
      'scrollTop': $target.offset().top 
     }, 900, 'swing', function() { 
      window.location.hash = target; 
     }); 
    }); 
}); 

有了这个HTML:

<a href="#top"> 
    <img alt="" heigth="60" onmouseout="this.src='http://i.imgur.com/0JvWWER.png'" onmouseover="this.src='http://i.imgur.com/Ow7CVn0.png'" src="http://i.imgur.com/0JvWWER.png" width="60" /> 
</a> 

现在,我怎么了window.scrollTo(0,0);工作,我该如何实现它在html正文?

在此先感谢。

+0

给了'',一个'ID = “顶”'和尝试? –

+0

'var $ target = target ==='#top'? 0:$(target).offset()。top;'会为你解决这个问题,你甚至不需要锚点。 – somethinghere

+0

谢谢,完美无缺:) –

回答

1

由于somethinghere说,这里做一个小的变化:

$(document).ready(function(){ 
    $('a[href^="#"]').on('click',function (e) { 
     e.preventDefault(); 
     var target = $(this).attr("href"); 

     $('html, body').stop().animate({ 
      // Change here... 
      'scrollTop': ((target === '#top') ? 0 : $(target).offset().top) 
     }, 900, 'swing', function() { 
      window.location.hash = target; 
     }); 
    }); 
}); 
+0

为什么不放弃'$ target',只在需要时才启动它?会保存_tiny_的资源量,但它会在线删除和jQuery调用(以个案为基础)。 – somethinghere

+0

@somethinghere好主意。 –

+0

@somethinghere检查是否可以吗? –