自動滾動手風琴到點擊部分的頂部

我對手風琴的內容持有人的以下代碼工作正常。我似乎不能鍛鍊如何將頁面自動滾動到點擊部分的頂部。現在容器打開，但頁面根本不滾動。自動滾動手風琴到點擊部分的頂部

請幫忙！摹

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name = "viewport" content = "user-scalable = no"> 

<title>TEST</title> 
<link href="style/english.css" rel="stylesheet" type="text/css" /> 
<link href="style/reset.css" rel="stylesheet" type="text/css" /> 
<link href="style/jquery.ui.all.css" rel="stylesheet" type="text/css" /> 

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> 
<script type="text/javascript" src="scripts/jquery1.8.2.min.js"></script> 
<script type="text/javascript" src="scripts/jquery-ui-1.10.3.custom.js"></script> 


<!--Accordian menu JQuery--> 
<script type="text/javascript"> 
$(function() { 
     $("#accordion").accordion({ 
      active: 'none', 
      heightStyle: "content", 
      collapsible: true, 
      /*heightStyle: "fill"*/ 
     }); 
    }); 


</script> 


<script> 
function Clicked1(){ 
$("#accordion").accordion({ active: 0 }); 
} 

function Clicked2(){ 
$("#accordion").accordion({ active: 1 }); 
} 

function Clicked3(){ 
$("#accordion").accordion({ active: 2 }); 
} 

function Clicked4(){ 
$("#accordion").accordion({ active: 3 }); 
} 

function Clicked5(){ 
$("#accordion").accordion({ active: 4 }); 
} 

function Clicked6(){ 
$("#accordion").accordion({ active: 5 }); 
} 

</script> 
<!--Accordian menu JQuery--> 

</head> 
<body> 

<div id="mainContainer" style="background-color:#009edb;"> 

    <!--Header--> 
    <div id="headerContainer"> 

     <a href="index.html"><img src="images/header.jpg" width="1000" height="110" border="0" /></a> 

    <!--Menu--> 
    NAVIGATION CODE 
    <!--Menu--> 
    </div> 
     <!--Header--> 

     <!--Body--> 
    <div id="mainBodyContainerWhite"> 
    <div id="topExtra"></div> 

     <!--Spotlight--> 
    <div id="spotlightBoxContainer"> 
    <div id="spotlightBoxFull" style="height:440px;"><img src="images/case_spotlight.jpg" width="986" height="508" usemap="#Map2" border="0" /> 
      <map name="Map2" id="Map2"> 
      <area shape="rect" coords="1,1,247,169" href="#section1" onclick="Clicked1()" id="scroll" /> 
      <area shape="rect" coords="494,2,740,169" href="#section1" onclick="Clicked2()" id="scroll" /> 
      <area shape="rect" coords="248,170,492,338" href="#section1" onclick="Clicked3()" id="scroll" /> 
      <area shape="rect" coords="741,171,983,335" href="#section1" onclick="Clicked4()" id="scroll" /> 
      <area shape="rect" coords="3,338,247,506" href="#section1" onclick="Clicked5()" id="scroll" /> 
      <area shape="rect" coords="491,338,739,507" href="#section1" onclick="Clicked6()" id="scroll" /> 
      </map> 
    </div> 
    </div> 
    <!--Spotlight--> 


    <div id="accordion"> 
    <!--Split--> 
    <h3 style="border-top:solid 1px #009edb; border-bottom:solid 1px #009edb;">ACCORDIAN 1</span></h3> 
     <div class="accordion-content"> 
      <div id="ContainerLeftInner"> 
      <div class="textInner"> 
      TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST. 
      </div> 
       </div> 
      </div> 

    <!--Split--> 
    <h3 style="border-top:solid 1px #009edb; border-bottom:solid 1px #009edb;">ACCORDIAN 2</span></h3> 
     <div class="accordion-content"> 
      <div id="ContainerLeftInner"> 
      <div class="textInner"> 
      TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST. 
      </div> 
       </div> 
      </div> 

    <!--Split--> 
    <h3 style="border-top:solid 1px #009edb; border-bottom:solid 1px #009edb;">ACCORDIAN 3</span></h3> 
     <div class="accordion-content"> 
      <div id="ContainerLeftInner"> 
      <div class="textInner"> 
      TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST. 
      </div> 
       </div> 
      </div> 

    <!--Split--> 
    <h3 style="border-top:solid 1px #009edb; border-bottom:solid 1px #009edb;">ACCORDIAN 4</span></h3> 
     <div class="accordion-content"> 
      <div id="ContainerLeftInner"> 
      <div class="textInner"> 
      TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST. 
      </div> 
       </div> 
      </div> 

    <!--Split--> 
    <h3 style="border-top:solid 1px #009edb; border-bottom:solid 1px #009edb;">ACCORDIAN 5</span></h3> 
     <div class="accordion-content"> 
      <div id="ContainerLeftInner"> 
      <div class="textInner"> 
      TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST. 
      </div> 
       </div> 
      </div> 

    <!--Split--> 
    <h3 style="border-top:solid 1px #009edb; border-bottom:solid 1px #009edb;">ACCORDIAN 6</span></h3> 
     <div class="accordion-content"> 
      <div id="ContainerLeftInner"> 
      <div class="textInner"> 
      TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST. 
      </div> 
       </div> 
      </div> 

    <!--Split--> 
    </div>  
    <!--Spotlight-->  
    </div> 
</div> 

    <!--Body--> 

<div id="footerContainer"></div> 

</body> 
</html>

來源

2013-10-22 Geeky Gaj

這是不相關的問題，但只是一個有益的建議，以儘量減少您一點點的js代碼。

首先從區域去除onclick屬性
添加下面的jQuery代碼。
下一頁除去超過14行代碼與功能名稱，如Clicked1()，Clicked2()等

$('#Map2 > area').click(function() { 
    $("#accordion").accordion({ active: $(this).index() }); 
});

希望這有助於！

來源

2013-10-22 13:37:52

非常感謝 - 欣賞它（幫助我學習更多），但那麼JS如何知道在某個特定區域點擊哪個手風琴部分？每個'點擊（）'區域開闢了一個獨立的手風琴部分。 –

感謝@GeekyGaj的讚賞。我們正在使用'$（this）.index（）'。如果第一個區域被點擊，那麼'$（this）.index（）'值爲'0'，因此活動手風琴將是第一個。接下來，如果第二個區域被點擊，那麼'$（this）.index（）'的值是'1'，因此活躍的手風琴將是第二個，等等。 –

@palash，我使用了你的技術，但是在我之後已經刪除了所有onclick，點擊根本不起作用。 –

Geeky Gaj;

嘿，哥們。帕拉斯提出了一個很好的觀點，你可以將他的建議融入到我的解決方案中。我有一個工作示例（我沒有將該函數鏈接到可單擊鏈接）的jfiddle，它在加載時滾動到打開的div。這裏是jfiddle。

關鍵是在頂部的一段文本週圍放置一個span標籤，並使用span標籤頂部的位置（通過id）調用scrollTop。我相信這將完成你正在尋找的東西。

$(function() { 
    $("#Accordion").accordion({ 
     collapsible: true, 
     active: false 
    }); 
    Navigate(0); 

}); 

function Navigate(dest) { 
    $("#Accordion").accordion({ 
     active: dest 
    }); 
    $(window).scrollTop(($("#acc" + dest).offset().top - 60)); 
}

來源

2013-10-22 14:07:36

感謝您的重播安德魯，我試圖按照你的jfiddle例子，我似乎滾動20px左右的第一次點擊，但後又一次點擊另一個鏈接，它滾動直到底部。我究竟做錯了什麼？這裏是鏈接，如果你想看看：http://grouporigin.com/clients/zadco/23102013/case_studies.html –

我看着你的代碼，看起來你沒有鏈接（圖片爲據我所知）附屬於一個事件。您想要將onclick =「導航（x）」添加到問題鏈接，其中x是一個數字。該數字應該對應於您要滾動到的元素的ID。我再次更新了jsfiddle。 –

對不起，我在寫評論時半睡半醒。 jsfiddle的作品，我把它的意見，以解釋發生了什麼事。看一看，如果實現起來似乎仍然複雜，我們可以找出答案。 –

自動滾動手風琴到點擊部分的頂部

回答

相關問題