jquery - 节标题前的 anchor

Question

我有一个章节标题。它叫做标语。我有一个指向它的 anchor 。但是 anchor 并没有位于标题之上(我希望它位于的位置)。它位于 div 类“Copy”的顶部。

导航菜单a href:

<li><a href="#rates">Rates</a></li>

我希望 anchor 就在此处上方....

<div class="tagline"><a name="rates"></a>
    <h2>Our Fair Rate Calculator</h2>
</div>

此刻 anchor 就在这里。在标语下方。我希望它位于标语之上。

<div class="copy">
<p><strong>How much shoud you pay?</strong></p>

我附上了 CSS 和 HTML 供您阅读:

a:link {
    color: inherit;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}

/* Clearfix */
 .clearfix:before, .clearfix:after {
    content:" ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
/* Basic Styles */
 nav {
    height:42px;
    top: 0;
    position: fixed;
    border-bottom: 2px solid #e1e1e1;
    width: 100%;
    margin: 0px auto;
    background:  #e63333;
    font-size: 100%;
    font-weight: 400;
    text-align: center;
    z-index:99;
}
nav ul {
    padding: 2px;
    margin: 0 auto;
    width: auto;
    height: 40px;
}
nav li {
    display: inline;
    float: none;
}
nav a {
    color: #fff;
    display: inline-block;
    width: 80px;
    text-decoration: none;
    line-height: 40px;
}

nav li:last-child a {
    border-right: 0;
}
nav a:hover, nav a:active {
    background-color: #f95f5f;

}
nav a#pull {
    display: none;
}
/*Styles for screen 600px and lower*/
 @media screen and (max-width: 600px) {
    nav {
        height:auto;
        top: 0;

    }
    nav ul {
        width: 100%;
        display: block;
        height: auto;
    }
    nav li {
        width: 50%;
        float: left;
        position: relative;
    }
    nav li a {
        border-bottom: 1px solid #e1e1e1;
        border-right: 1px solid #e1e1e1;
    }
    nav a {
        text-align: left;
        width: 100%;
        text-indent: 25px;
    }
}
/*Styles for screen 515px and lower*/
 @media only screen and (max-width: 600px) {
    nav {
        border-bottom: 0;
    }
    nav ul {
        display: none;
        height: auto;
    }
    nav a#pull {
        display: block;
        background-color: #e63333;
        width: 100%;
        position: relative;
        box-shadow: 2px 2px 0px #888888;
    }
    nav a#pull:after {
        content:"";
        background: url('../images/nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }
}
/*Smartphone*/
 @media only screen and (max-width: 320px) {
    nav li {
        width: 50%;
        float: left;
        position: relative;
    }
    nav li a {
        border-bottom: 1px solid #576979;
    }
}
/* End Clearfix */


/* STRUCTURE */

#pagewrap {
    margin: 0px auto;
    max-width:960px;

    background-color: #FFFFFF;
}

body {
    font-size:100%; 
    line-height: 1.45em;
    font-family: 'Roboto', sans-serif;
    font-weight: 400, 500, 700;
    -webkit-text-size-adjust: 100%;
    height: auto;
    background-color:  #e1e1e1;
}

header {
    width: 100%;
    height: 100%;
    padding-top: 62px;
}
.logo {
    background-image: url(../images/logo_full.png);
    background-repeat: no-repeat;
    width: 290px;
    height: 85px;
    margin-left: 59px;

}
.tagline {
    clear: both;
    margin:0 auto;
    width: 100%;
    height: 32px;
    text-align: center;
    background-color: #888888;
    border-bottom: 3px solid #e1e1e1;

}

.copy{
    margin: 14px auto;
    width: 60%;
    text-align: left;
    background-color: #FFFFFF;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    padding: 10px 15px 10px 15px;;
}

.copy p {
    font-size: 98%;
    line-height: 1.3em;  
    font-weight: 400;
    color: #303030;
    margin: .4em;
}

strong {
    font-weight: 500;
}

h2 {
    font-size: 105%;
    color: #FFFFFF;
    font-weight: 300;
    padding: 5px;
}

h4 {
    font-size: 95%;
    color: #FFFFFF;
    font-weight: 300;
    margin: 0;
}

ul {
    display: block;
    list-style-type: none;
    padding:0;
    margin: 0;
}

.footer {
    clear: both;
    padding: 12px 0 10px 0;
    background-color: #e63333;
    font-weight: 300;
    text-align: center;
    margin:0 auto;
    width: 100%;
}



/* Chef Registration Form */
:-moz-placeholder {
    font-size: 100%;
    font-weight: 300;

}

::-webkit-input-placeholder {
    font-size: 100%;
    font-weight: 300;
}

*:focus {outline: none;}

.form {
margin: 10px auto;
width:60.5%;
height:auto;
background-color: #FFFFFF;
text-decoration: none;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border: 1px solid #e1e1e1;
padding-left: 2.5%;
padding-top: 20px;

}


.form input {

    width: 90%; 
    padding: 8px 0 8px 8px;
    margin-left: 12px;
    list-style-type: none;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border: 1px solid #ccccff;
    background: #fafafa;

}

.form button {
    width: 91%;
    margin-bottom: 8px;
    margin-left: 15px;

}
.form li{
    padding-bottom:8px; 
    position:relative;
    list-style-type: none;
}

.form textarea {
    max-width: 90%;
    min-width: 90%;
    padding: 4px 0 4px 8px;
    margin-left: 12px;


}

.form input, .form textarea { 
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #fafafa inset;

}
.form input:focus, .form textarea:focus {
    background: #fff; 
    border:1px solid #6699ff; 
    box-shadow: 0 0 3px #aaa; 
    list-style-type: none;

}
/* Button Style */

button.submit {
    background-color: #b3b3b3;
    background: -webkit-gradient(linear, left top, left bottom, from(#b3b3b3), to(#303030));
    background: -webkit-linear-gradient(top, #b3b3b3, #303030);
    background: -moz-linear-gradient(top, #b3b3b3, #303030);
    background: -ms-linear-gradient(top,#b3b3b3,#303030);
    background: -o-linear-gradient(top, #b3b3b3, #303030);
    background: linear-gradient(top, #b3b3b3, #303030);
    border: 1px solid #455868;
    border-bottom: 1px solid #455868;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    box-shadow: inset 0 1px 0 0 #455868;
    -webkit-box-shadow: 0 1px 0 0 #455868 inset ;
    -moz-box-shadow: 0 1px 0 0 #455868 inset;
    -ms-box-shadow: 0 1px 0 0 #455868 inset;
    -o-box-shadow: 0 1px 0 0 #455868 inset;
    color: white;
    font-weight: 300;
    font-size: 105%;
    padding: 6px 20px;
    text-align: center;


}
button.submit:hover {
    opacity:.85;
    cursor: pointer; 
}
button.submit:active {
    border: 1px solid #303030;
    box-shadow: 0 0 10px 5px #455868 inset; 
    -webkit-box-shadow:0 0 10px 5px #455868 inset ;
    -moz-box-shadow: 0 0 10px 5px #455868 inset;
    -ms-box-shadow: 0 0 10px 5px #455868 inset;
    -o-box-shadow: 0 0 10px 5px #455868 inset;

}

/* End of Chef Registration Form */


/************************************************************************************
MEDIA QUERIES
*************************************************************************************/

/* for 1040px or less */

@media screen and (max-width: 1040px) {
    #pagewrap {
        width: 90%;
        background-image: url(../images/bg_full.jpg);
        background-position: top;
        background-repeat: no-repeat;
    }

header {
    padding-top: 54px;
}

.logo {
    background-image: url(../images/logo_full.png);
    background-repeat: no-repeat;
    width: 293px;
    height: 83px;
    margin-top: 6px;
    margin-left: 60px;

}
.copy{
    width: 70%;
}

.form {
width:69.5%;
padding-left: 4%;
padding-top: 20px;
}

.form button {
    width: 91.5%;
    margin-bottom: 8px;
    margin-left: 13px;
}


}

/* for 600px or less */


@media screen and (max-width: 800px) {
    #pagewrap {
        width: 94%;
        background-image: url(../images/bg_760.jpg);
        background-position: top;
        background-repeat: no-repeat;
    }

header {
    padding-top: 54px;
}

.logo  {
    background-image: url(../images/logo_full.png);
    background-repeat: no-repeat;
    width: 293px;
    height: 83px;
    margin: 0 auto;
    margin-top: 5px;
}

.copy{
    width: 70%;
    padding: 10px 10px 10px 20px;
}

.form {
width:69.5%;
padding-left: 4%;
padding-top: 20px;
}

.form button {
    width: 92%;
    margin-bottom: 8px;
    margin-left: 13px;
}

}

/* for 480px or less */

@media screen and (max-width: 480px) {
    #pagewrap {
        width: 96%;
        background-image: url(../images/bg_480.jpg);
        background-position: top;
        background-repeat: no-repeat;
    }

header {
    padding-top: 54px;
}

.logo  {
    background-image: url(../images/logo_small.png);
    background-repeat: no-repeat;
    width: 240px;
    height: 68px;
    margin: 0 auto;

}

h2 {
    font-size: 110%;

}
h3 {
    font-size: 120%;
}

.copy p {
    font-size: 110%;

}

.copy{
    width: 84%;
    padding: 10px 10px 10px 10px;
}

.form {
width:85%;
padding-left: 2%;
padding-right: 3%;
padding-top: 20px;
}

.form button {
    width: 93%;
    margin-bottom: 8px;
    margin-left: 13px;
}

}

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
    <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Gimme Chefs- Sydney Relief Chefs without the Agency Rates</title>
    <meta name="description" content="Gone are the days when you needed a temp chef and had to pay ridiculous Agency rates. The future is now with Gimme Chefs, starting from just $28 per hour.">
    <meta name="keywords" content="gimmechefs, gimme chefs, gimme, hospitality chefs sydney, relief chefs sydney, agency chefs sydney, contract chefs sydney, freelance chefs sydney, chef agencies sydney, hospitality agencies sydney, hospitality recruitment sydney, chef jobs sydney">
    <meta name="author" content="Gimme Chefs Sydney Australia">
     <link rel="stylesheet" href="css/normalize.css">
    <link href="css/styles.css" rel="stylesheet">

            <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>
    $(function () {
     var pull = $('#pull');
     menu = $('nav ul');
     menuHeight = menu.height();

     $(pull).on('click', function (e) {
         e.preventDefault();
         menu.slideToggle();
     });

     $('nav li>a').on('click', function (e) {
         if ($(window).width() < 600) {
             menu.slideUp();
         }
     });

     $(window).resize(function () {
         var w = $(window).width();
         if (w > 320 && menu.is(':hidden')) {
             menu.removeAttr('style');
         }
     });
 });


</script>

</head> 

<body>


<nav class="clearfix">
    <ul class="clearfix">
        <li><a href=""><span style="color:white">Home</a></li>
        <li><a href="#rates"><span style="color:white">Rates</a></li>
        <li><a href="#book"><span style="color:white">Book</a></li>
        <li><a href="#buy"><span style="color:white">Buyout</a></li>
        <li><a href="#join"><span style="color:white">Join</a></li>
        <li><a href="#contact"><span style="color:white">Contact</a></li>

    </ul> 
        <a href="#" id="pull"><span style="color:white">Menu</span></a>
</nav>
<div id="pagewrap">

    <header>

        <a href="tel:0470460830"><div class="logo"></div></a>       

    </header>

             <div class="tagline">
                <h2>A Band of Sydney Relief Chefs</h2>
            </div>

            <div class="copy">
                <p>Gone are the days when you needed a Relief Chef and were forced to pay those ridiculous Sydney Chef Agency rates.</p>
                <p>Tell us <strong>the rate you want to pay </strong>and we'll get you a Chef that charges that rate.</p>
                <p>Our booking fee is $4/hr per Chef.   You will get a proven Chef <strong>from just $32/hr</strong>.</p>
                <p><strong>Sydney Agencies charge $45 - $80/hr</strong> and you don't know what you're getting.</p>
                <p>With us you save $130+/day and <strong>you get one of our mates</strong>, or a new mate we've worked with and will vouch for.</p>
                <p><a href="tel:+61470460830"><strong>CALL</strong></a> or <a href="sms:+61470460830"><strong>SMS</strong></a> 8am-12am.
                </p>
            </div>

        <div class="tagline"><h2>They Really Need a Gimme Chef...</h2>      </div>
         <video id="gimmeMovie" width="640" height="360" preload controls>
        <source src="gimmeMovie_H264.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
        <source src="gimmeMovie_Ogg.ogv" type='video/ogg; codecs="theora, vorbis"' />
        <source src="gimmeMovie_WebM.webm" type='video/webm; codecs="vp8, vorbis"' />
        </video>



     <div class="tagline"><a name="rates"></a>
                <h2>Our Fair Rate Calculator</h2>
            </div>

            <div class="copy">
            <p><strong>How much shoud you pay?</strong></p>
                <p>We use $28/hr as a base rate Mon to Fri to get a Chef into your door.</p>
                <p>Our guide is 2c per hour for each cover that you sell.</p>
                <p>E.g. Your Venue does 100 covers in a day.  100 x 2c per hour = $2.</p>
                <p>If you add $2 to the base rate of $28 you get $30/hr.</p>
                <p>Fine Dining Chefs will come at a premium not included in this guide.</p>

                <p><strong>Who pays Who?</strong></p>
                <p>You pay Gimme Chefs our booking fee in advance and you pay the Chef directly for the hours they work.  This can be through your payroll or via their ABN invoice.</p>

                <p><strong>100% Satisfaction Guarantee</strong></p>
                <p>If for any reason you are not satisfied with our Chef, send them home and we will do all we can to get a replacement Chef to your Venue immediately.</p>
                <p>If we have no Chefs available we will refund your booking fee in total and give you 25 complimentary booking fee hours.</p>

            </div>

            <div class="tagline"><a name="book"></a><h2>Pay For Your Booking</h2></div>

            <div class="copy">
                <p><strong>Have We Talked?</strong></p>
                <p>You need to <a href="tel:+61470460830"><strong>CALL</strong></a> or <a href="sms:+61470460830"><strong>SMS</strong></a> us between 8am-12am PRIOR to making your booking.</p>

            </div>

            <form class="form" action="" method="post" name="form">
                            <ul>       

                                    <li>
                                     <input type="text" id="venueName" maxlength="30" name="venueName" placeholder="Name of Your Venue" required>
                                    </li>

                                    <li>
                                      <input type="text" id="venueSuburb" maxlength="40" name="venueSuburb" placeholder="Venue's Suburb" required>
                                    </li>

                                    <li>
                                        <input type="text" id="venueFirstLastName" maxlength="30" name="venueFirstLastName" placeholder="First and Last Name" required>
                                    </li>

                                    <li>
                                    <input type="text" id="venueMobileNumber" maxlength="10" name="venueMobileNumber" placeholder="Mobile Number" required>
                                    </li>
                                    <li>
                                      <input type="text" id="venueEmail" maxlength="40" name="venueEmail" placeholder="Your Email" required>
                                    </li>
                                    <li>
                                        <input type="text" id="numberChefs" maxlength="40" name="numberChefs" placeholder="Number of Chefs" required>

                                    </li>
                                    <li>
                                    <input type="text" id="numberShifts" maxlength="40" name="numberShifts" placeholder="Number of Hours" required>
                                    </li>

                                    <li>
                                        <button class="submit" type="submit">Pay Now</button>
                                    </li>
                                </ul>   
                        </form>


    <div class="tagline"><a name="buy"></a><h2>Buy a Gimme Chef</h2></div>

            <div class="copy">
                <p>Our sliding scale buyout fees means <strong>you pay less than $500</strong> to take a Chef.</p>
                <p><strong>It works like this:</strong></p>
                <p>The fee to you is $500 less the rate you have paid Gimme Chefs for that Chef.</p>
                <p>E.g. You've had the Chef for 100 hours and paid us $4/hr.</p>
                <p>$4 x 100 = $400 already paid.</p>
                <p>The final <strong>buyout fee for that Chef will be $100</strong>.  Damn good deal don't you think?</p>
            </div>

    <div class="tagline"><a name="join"></a><h2>Become a Gimme Chef</h2></div>
    <div class="copy">
                <p><strong>Good Choice!</strong></p>
                <p>You're just one form away from earning <strong>your hourly rate</strong>, not the crumbs the Agency leaves behind for you.  We will contact you within 24 hrs.</p>
                <p><strong>Note:</strong> If you commit any of these acts you <strong>will be banned from us for life</strong>.</p>
        <p><span style="color:#e63333; font-size:20px; font-style:italic">x</span> &nbsp Any no shows.</p>
        <p><span style="color:#e63333; font-size:20px; font-style:italic">x</span> &nbsp Turning up late (3 strikes).</p>
        <p><span style="color:#e63333; font-size:20px; font-style:italic">x</span> &nbsp Not giving Gimme Chefs 2 hrs notice by phone if unable to get to a contract.</p>
        <p><span style="color:#e63333; font-size:20px; font-style:italic">x</span> &nbsp Being under the influence of alcohol or illegal drugs.</p>
        <p><span style="color:#e63333; font-size:20px; font-style:italic">x</span> &nbsp Rudeness, aggresion or violence towards Venue staff or customers.</p>
        <p><span style="color:#e63333; font-size:20px; font-style:italic">x</span> &nbsp Acts of gross negligence by you to a Venue, their staff or their equipment.</p>



            </div>

            <form class="form" action="" method="post" name="form">
                            <ul>       

                <li>
                <input type="text" name="firstlastname" placeholder="First and Last Name" required/>
                </li>

                <li>
                    <input type="tel" name="mobile" placeholder="Mobile Number" required/>
                </li>

                <li>
                    <input type="email" name="email" placeholder="Your Email" required/>
                </li>

                <li>
                    <input type="text" name="suburb" placeholder="Your Suburb" required/>
                </li>
                <li>
                    <input type="text" name="locations" placeholder="Preferred Locations" required/>
                </li>
                <li>
                    <input type="select" name="venues" placeholder="Preferred Venue Types" required/>

                </li>
                <li>
                    <input type="text" name="availability" placeholder="Your Availability" required/>
                </li>
                <li>
                    <input type="text" name="shifts" placeholder="Preferred Shifts" required/>
                </li>

                <li>
                    <input type="text" name="mfrate" placeholder="Mon-Fri Hourly Rate" required/>
                </li>
                <li>
                    <input type="text" name="satrate" placeholder="Saturday Hourly Rate" required/>
                </li>
                <li>
                    <input type="text" name="sunrate" placeholder="Sunday Hourly Rate" required/>
                </li>
                <li>
                    <input type="text" name="payment" placeholder="Preferred Payment" required/>
                </li>

                <li>
                    <button class="submit" type="submit">Register Now</button>
                </li>
            </ul>   
                        </form>



            <div class="tagline"><a name="contact"></a><h2>Contact Gimme Chefs</h2></div>

            <form class="form" action="" method="post" name="form">
                            <ul>       

                <li>
                <input type="text" name="firstlastname" placeholder="First and Last Name" required/>
                </li>

                <li>
                    <input type="tel" name="mobile" placeholder="Mobile Number" required/>
                </li>

                <li>
                    <input type="email" name="email" placeholder="Your Email" required/>
                </li>

                <li><textarea rows="4" cols="50" required></textarea>

                </li>

                <li>
                    <button class="submit" type="submit">Send Message</button>
                </li>
            </ul>
                        </form>

            <div class="footer">

            </div>
            </div>
</body>
</html>

Answer 1

所以基本上您需要偏移您的页面 anchor 以补偿固定标题？

如果您在标语 div 中需要它们，则为标签设置专用类可能会更好

但下面的代码片段会起作用。随心所欲

.tagline a {
display: block; 
position: relative; 
top: -100px; 
visibility: hidden; 
}