-1

これが私が使っているものです

<h1>Red to Violet</h1>
<a href="#one">first</a> .
<a href="#two">second</a> .

<div id="section">
<div class="innersections">
<a name="one"></a>

(text)

</div> <hr> 
<div class="innersections">
<a name="two"></a>
(text)

</div></div>

リンクをクリックしてもページが上がらず、タイトル「red to violet」が見えないようにしたいのですが、「second」をクリックすると 2 番目の「innersections」が表示されます。ノート; css/html コードしか使用できません。

4

3 に答える 3

1

移動先の要素で id を使用します。 

<h1>Red to Violet</h1>
<a href="#one">first</a> .
<a href="#two">second</a> .

<div id="section">
<div class="innersections">
<a id="one" name="one"></a>

(text)

</div> <hr> 
<div class="innersections">
<a id="two" name="two"></a>
(text)

</div></div>
于 2013-09-19T12:49:13.397 に答える
0

解決した

http://jsfiddle.net/GPRVX/

.section {
    margin-top: 8em;
}
.fix {
    height: 7em;
    top:0; left: 0;
    position: fixed;
    background: white;    
    margin: 0;
    padding: 0.5em;
    width: 100%;
}
.innersections {
    padding: 0.5em;
}
.section a:before {
    display:block; 
    content:""; 
    height:8em; 
    margin:-8em 0 0; 
}
于 2013-09-19T14:45:16.470 に答える
0

h1ヘッダーを一番上に残したい場合は、position:fixed;top:0.

これを示すJSFiddleは次のとおりです: http://jsfiddle.net/VZjdN/header (HTML に小さな変更を加えました。HTML5タグを使用したくない場合は、 div.)

完全な CSS は次のとおりです。

header {
    position: fixed;
    top: 0;
    background: white;
    width: 100%;
}

.innersections {
    padding-top: 5em;
}

そして、変更されたマークアップ:

<body>
    <header>
        <h1>Red to Violet</h1>
        <a href="#one">first</a>. <a href="#two">second</a>.
    </header>

    <div id="section"> 
        <a name="one"></a>
        <div class="innersections" style="padding-top:6em">
             <h2>Inner 1</h2>
            <div style="height:800px"></div>  <!-- filler -->
        </div>
        <hr> 

        <a name="two"></a>
        <div class="innersections" style="padding-top:4em">
             <h2>Inner 2</h2>
            <div style="height:800px"></div> <!-- filler -->
        </div>
    </div>
</body>
于 2013-09-19T13:37:51.240 に答える