如何在同一页面上使用锚点选项卡去一个divdiv？

我要使我的网站可以水平旋转。但是在这里，我想使用特定的“ div” usnig锚标签。这是我的代码

<div class="horizon scroll">
        <div id="header">
        <div style="height: 60px; width:750px;left:10%;position:relative;">
            <ul>
                <li style="float:left; "> <a href="#home">Home</a> </li>
                <li style="float:left; "> <a href="#pro">Products</a> </li>
                <li style="float:left; "> <a href="#fly">Services</a> </li>
                <li style="float:left; "> <a href="#baloon">About Us</a> </li>
            </ul>
        </div>
    </div>
<div class="front scroll">

        <h1 class="intro">Scroll down</h1>

        <div id="home" class="panel1 page">
            <h2 style="margin: 40px 40px 30px 20px;">Products</h2>
            <p style="margin: 0px 30px 30px 30px;">
                The hot air balloon is the oldest successful human-carrying flight technology. It is part of a class of aircraft known as balloon aircraft.
            </p>    
        </div>

        <div id="pro" class="panel2 page">
            <h2 style="margin: 40px 40px 30px 20px;">Sevices</h2> 
            <p style="margin: 0px 30px 30px 30px;">
                A hot air balloon consists of a bag called the envelope that is capable                 </p>
        </div>

        <div  id ="fly" class="panel3 page">
            <h2 style="margin: 40px 40px 30px 20px;">Education</h2>
            <p style="margin: 0px 30px 30px 30px;">
                As with all aircraft, hot air balloons cannot fly beyond the             </p>
        </div>

        <div  name= "kala" id="baloon" class="panel4 page">
            <a ><h2 style="margin: 40px 40px 30px 20px;">About Us</h2></a>
            <p style="margin: 0px 30px 30px 30px;">
            Beginning during the mid-1970s, balloon envelopes have been made
            </p>
        </div>
</div>

在这里，Id无法转到特定的Div。我可以代替这个ID做吗？谢谢。