jquery滚动来抵消页面加载的目标div

我想滚动到URL中的div。这可能是21个ID，如一个：jquery滚动来抵消页面加载的目标div

url.com/test#lite1

url.com/test#lite2

url.com/test#lite3

我需要这发生在页面加载（用户来自电子书，应该看到他们点击的确切项目）。

这里是我目前拥有的代码：

$(document).ready(function(){ 
    $('a[href^="#"]').load(function() { 
     e.preventDefault(); 

     var target = this.hash; 
     var $target = $(target); 

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

</script>

它不工作，我想这是因为这部分（我不知道我在这里做什么）的：

$('a[href^="#"]').load(function() {

我也希望它在页面的中心（不像浏览器在滚动到div时切断顶部）。请让我知道如果这是正确的：

$target.offset().top -150

非常感谢！

来源

2015-11-04 ramitaste

window.location.hash包含URL中的当前散列，所以使用它。由于散列已经在URL中（正如你所说，他们通过点击带有散列的链接来到页面），所以你不需要手动添加它。尝试使用这样的：

$(document).ready(function(){ 
    $('html,body').animate({ 
      scrollTop: $(window.location.hash).offset().top-150 
     }, 900, 'swing'); 
});

使用WordPress，似乎$需要通过jQuery的更换，因此就出来：

jQuery(document).ready(function(){ 
    jQuery('html,body').animate({ 
      scrollTop: jQuery(window.location.hash).offset().top-150 
     }, 900, 'swing'); 
});

来源

2015-11-04 15:20:44 Zeus

http://www.tasteaholics.com/shopping-list-ingredients/#lite14 我尝试它在这里，但不工作：/我错过了什么或不加载的东西？我有jquery加载页面： – ramitaste

@ramitaste在该页我看到''scrollTop'，'逗号在scrollTop导致语法错误后，使用'：'而不是逗号。而且，如果你使用的是chrome，那么请按ctrl + shift + i来获取开发者工具，然后点击控制台选项卡，它会显示你的语法错误和其他警告。 – Zeus

Ahh我切换回你的代码（正在尝试Quantastical的代码）并用jQuery代替$并且它工作正常！非常感谢！！ – ramitaste

作为替代方案，你可以尝试使用下面的jQuery插件。我已经在多个项目中使用过它们。他们是定制的，并提供不错的，流畅的动画效果：

scrollTo（download，documentation）允许您滚动到页面上的特定元素。基本用法：$(element).scrollTo(target);

localScroll（download，documentation）要求scrollTo作为依赖，并处理锚你。您可以通过选择它们的容器将其应用到特定的一组链接：$('#link-container').localScroll();，或者你可以在全球范围激活：$.localScroll();

来源

2015-11-04 21:52:21 MarkPlewis

jquery滚动来抵消页面加载的目标div

回答

相关问题