自动滚动手风琴到点击部分的顶部

我对手风琴的内容持有人的以下代码工作正常。我似乎不能锻炼如何将页面自动滚动到点击部分的顶部。现在容器打开，但页面根本不滚动。自动滚动手风琴到点击部分的顶部

请帮忙！摹

<!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的作品，我把它的意见，以解释发生了什么事。看一看，如果实现起来似乎仍然复杂，我们可以找出答案。 –

自动滚动手风琴到点击部分的顶部

回答

相关问题