Question

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

请帮忙！ ģ

<!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>

Answer 1

这与您的问题无关，只是一个有用的建议，可以最小化您的js代码。

首先从区域中删除onclick属性
添加以下jQuery代码。
接下来删除包含Clicked1()，Clicked2()等功能名称的14行代码。

<强> JS

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

希望这有帮助！

Answer 2

Geeky Gaj;

嘿哥们。 Palas提出了一个很好的观点，你可以将他的建议纳入我的解决方案中。我有一个带有一个工作示例的jfiddle（我没有将该函数链接到一个可点击的链接），它在加载时滚动到open div。这是jfiddle。

关键是在顶部的一段文本周围放置一个span标记，并使用span标记顶部的位置调用scrollTop（按id）。我相信这将实现您的目标。

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

});

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

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

2 个答案: