将一个按钮链接到另一个页面的一部分

Question

我有一个链接按钮转到另一个页面，它可以工作，但我希望链接转到该页面的一个特定部分。我知道我应该为此使用jquery，由于某种原因，它不跳转到我希望它跳到的部分。

我的按钮链接：

<div class="btn_holder top-slide"><a 
    href="http://testurl.com/media#isabelo"><p class="leeu_button">READ 
    MORE</p></a> 
</div> 

我目前有srolls到页面底部，而不是部分其中id =“isabelo”。所以这jQuery的作品，但它不是我想要的。希望你能理解。

$(document).ready(function(){ 

//check if hash tag exists in the URL 
if(window.location.hash) {   
    $("html, body").animate({ scrollTop: $(document).height() }, 1000); 
    1000);  
}  }); 

我也已经尝试过这种（不工作）：

$(document).ready(function(){ 

//check if hash tag exists in the URL 
if(window.location.hash) {   
    $('html, body').animate({ scrollTop: $("#isabelo").offset().top }, 1000);  
} 
    }); 

的页面即时试图链接到与一个ID = “isabelo”

<div class="content_holder terms_row" id="isabelo"> 

Answer 1

我解决了这个：

$(document).ready(function(){  
//check if hash tag exists in the URL 
if(window.location.hash) { 
setTimeout(function(){ 
    $('html, body').animate({ scrollTop: $("#isabelo").offset().top }, 
1000); 
},1000);  
    }  
}); 

使用的超时funtion加载它后位。解决:)

Answer 2

一个div

你不应该为此需要jquery。您应该能够通过直接的HTML链接到“media/pagename.html＃isabelo”。但是你错过了页面名称。那个，你需要在那里有一个NAME标签和ID。

Answer 3

<a href="http://www.example.com/some-page-or-other.html#exactline">Click here</a> 

要跳转到该位置应该有name="exactline"财产

Answer 4

嗯，我试过在同一个页面，它的工作。我不是在jQuery的专家，但如果：

$("html, body").animate({ scrollTop: $(document).height() }, 1000); 

的作品，但与isabelo不，也许是因为浏览器仍没有加载HTML哪里isabelo是。尝试进行调试，看看您是否具有该点上的那个元素，或者它尚未加载。

我发现其他不同的是，在第一个例子，你把两次 “1000”

$（ “HTML，身体”），动画（{scrollTop的：$（文件）.height（）}， 1000）; 1000）;

在第二

不

$（ 'HTML，身体'）动画（{scrollTop的：$（ “＃isabelo”）偏移（）顶部}，1000）。

但我认为这是一个错误的复制/粘贴，因为在第一个例子中，我没有找到它的感觉，但它的工作原理就像你说的。

Answer 5

---

setInterval将是比setTimeout更好的方法。如果您的页面在1秒内未加载，那么setTimeout内的代码将无法按预期工作。但是，如果每秒都有间隔，并且一旦获得该元素就清除间隔，这将始终有效。

$(document).ready(function(){  
//check if hash tag exists in the URL 
if(window.location.hash) { 
a = setInterval(function(){ 
    if($("#isabelo").length) { 
     $('html, body').animate({ scrollTop: $("#isabelo").offset().top }, 
     1000); 
     clearInterval(a); 
    } 
},1000);  
    }  
});