使用href顯示/隱藏div並使用jquery滾動到顯示的div

我有一個jquery函數，顯示/隱藏div點擊href鏈接點擊。但是每次加載div時，頁面將滾動到頂部而不是目標div。這裏是jQuery代碼和div s的html佈局。 jquery用於從點擊鏈接獲取id並打開目標div。使用href顯示/隱藏div並使用jquery滾動到顯示的div

我需要頁面滾動到單擊目標div。

所以如果我點擊item1然後頁面滾動到div100然後當我點擊item1-desc1那麼頁面應滾動到div1。

有沒有辦法編輯jquery來實現這一點。

我已經嘗試在click函數中使用下面的內容。但該頁面不滾動到目標div。

$('html, body').animate({ 
    scrollTop: $($(this).attr('#')).offset().top 
    }, 500); 
    return false;

$('a').click(function() { 
 
var divname= this.name; 
 
$("#"+divname).fadeIn("slow").siblings().fadeOut("fast"); 
 
});

<a href="#" name="div100" class="btn btn-primary btn-lg" ><font color = "white">item1</font></a> 
 
<a href="#" name="div200" class="btn btn-primary btn-lg" ><font color = "white">item2</font></a> 
 
<a href="#" name="div300" class="btn btn-primary btn-lg" ><font color = "white">item3</font></a> 
 
<a href="#" name="div400" class="btn btn-primary btn-lg" ><font color = "white">item4</font></a> 
 

 
<div id="div100" style="display:none" align="left"> 
 
<li1><a href="#" name="div1" >item1-desc1</a></li1> 
 
<li1><a href="#" name="div2" >item1-desc2</a></li1> 
 
<li1><a href="#" name="div3" >item1-desc3</a></li1> 
 
    
 
<div id="div200" style="display:none" align="left"> 
 
<li1><a href="#" name="div4" > item2-desc1</a></li1> 
 
<li1><a href="#" name="div5" >item2-desc2</a></li1> 
 
<li1><a href="#" name="div6" >item2-desc3</a></li1> 
 
    
 
<div id="div300" style="display:none" align="left"> 
 
<li1><a href="#" name="div7" > item3-desc1</a></li1> 
 
<li1><a href="#" name="div8" >item3-desc2</a></li1> 
 
<li1><a href="#" name="div9" >item3-desc3</a></li1> 
 
     
 
<div id="div400" style="display:none" align="left"> 
 
<li1><a href="#" name="div10" > item4-desc1</a></li1> 
 
<li1><a href="#" name="div11" >item4-desc2</a></li1> 
 
<li1><a href="#" name="div12" >item4-desc3</a></li1> 
 
    
 
<div id="div1" style="display:none" align="left"> 
 
    <!--div1 contents--> 
 
<div id="div2" style="display:none" align="left"> 
 
    <!--div2 contents--> 
 
<div id="div3" style="display:none" align="left"> 
 
    <!--div3 contents--> 
 
<div id="div4" style="display:none" align="left"> 
 
    <!--div4 contents--> 
 
    <!--- so on...->

來源

2016-08-03 Coding Enthusiast

使用'event.preventDefault（）'停止默認鏈接操作。 –

這不會做任何事情。當我使用上面的行時，鏈接不工作。 –

你的嘗試是好的，你只是把錯誤的ATTR：

$('html, body').animate({ 
    scrollTop: $($(this).attr('href')).offset().top 
    }, 500);

而且你應該添加的preventDefault：

$('a').on('click', function(e){ 
    e.preventDefault(); 
    var divname= this.name; 
    $("#"+divname).fadeIn("slow").siblings().fadeOut("fast"); 
    $('html, body').animate({ 
     scrollTop: $($(this).attr('href')).offset().top 
    }, 500); 
}

來源

2016-08-03 14:45:46 shwarp

我之前也試過上面的代碼。它不會做任何事情。頁面上的鏈接不會提出任何問題。 @shwarp –

噢，對不起，我沒有仔細觀察你的html：你需要在你想要去的div的id中加入href，比如''，但是如果你不想這麼做，那麼你可以用'$（「＃」+ divname）' – shwarp

替換'$（this）.attr（'href'）'它實際上起作用。非常感謝。我正在嘗試各種插件，這是一個簡單的修復。 –

呦u能在a元件改變href屬性包括目標ID：

<a href="#div100" name="div100" class="btn btn-primary btn-lg" ><font color = "white">item1</font></a> 

<li1><a href="#div1" name="div1" >item1-desc1</a></li1>

這將錨添加到元件與在href的ID。因此，您可以刪除：

$('html, body').animate({ 
    scrollTop: $($(this).attr('#')).offset().top 
    }, 500); 
return false;

來源

2016-08-03 15:01:43 tenhsor

使用href顯示/隱藏div並使用jquery滾動到顯示的div

回答

相關問題