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

Question

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

我的按钮链接：

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

我目前滚动到页面底部而不是 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

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

Answer 1

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

你想跳转到的位置应该有name="exactline"属性

Answer 2

你不应该为此需要 jquery。您应该能够使用直接 HTML 链接到“media/pagename.html#isabelo”。但是您缺少页面名称。那，你需要在那里有一个 NAME 标记以及 ID。

Answer 3

嗯，我在同一个页面上试过了，它奏效了。我不是 jquery 方面的专家，但如果：

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

有效，但 isabelo 不能，可能是因为浏览器还没有加载 isabelo 所在的 html。尝试调试以查看该点是否有该 isabelo 元素，或者它仍未加载。

我发现的其他不同之处是，在第一个示例中，您输入了两倍的“1000”

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

第二个不

$('html, body').animate({ scrollTop: $("#isabelo").offset().top }, 1000);

但我认为这是复制/粘贴的错误，因为在第一个示例中我没有找到它的意义，但它按你说的那样工作。

Answer 4

我的解决方案：

$(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);       
  }      
}); 

使用超时功能稍后加载它。解决了:)

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);       
  }      
});