0

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

请帮忙 ！G

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

2 回答 2

0

极客盖伊；

你好朋友。Palas 提出了一个很好的观点，您可以将他的建议纳入我的解决方案中。我有一个带有工作示例的 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-22T14:07:36.593 回答
0

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

  • 首先onclick从区域中删除属性
  • 添加下面的 jQuery 代码。
  • 接下来删除 14+ 行带有函数名称的代码，如Clicked1(),Clicked2()等。

JS

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

希望这可以帮助！

于 2013-10-22T13:37:52.610 回答