谷歌表格扔掉HTML锚点?

时间:2014-01-20 21:55:01

标签: html css anchor

我使用HTML锚点作为粘性导航方法。基本上,页面顶部有一个导航栏,链接充当锚点。注册将是此导航栏的一部分。您可以单击该链接,然后导航到Link Here所在页面的一部分。这个功能一直很好,直到昨晚。我在链接此处区域下方的代码处于混乱状态,现在当您单击“注册”链接时,它根本不起作用。

链接下方这是一个谷歌表格。锚之前可以完美地与它下面的形状一起工作,但是现在只有当形状不在它下面时它才起作用。这是我的代码:

<div class="six" style="width:100%; height:760px; background-color:#CC3;"> <a name="signup">test</a>
    <center>
        <div id="signup">
            <h2> <a href="https://docs.google.com/forms/d/1jeFnlQodB8a3p9ASKEwXFToRq__V1nLikNSGe07kG4E/viewform">Click here to sign up</a></h2>
        </div>
    </center>
    <center>
        <form action="https://docs.google.com/forms/d/1jeFnlQodB8a3p9ASKEwXFToRq__V1nLikNSGe07kG4E/formResponse" method="POST" id="ss-form" target="_self" onsubmit="">
            <ol style="padding-left: 0">
                <div class="ss-form-question errorbox-good" style="width:600px; float:left;">
                    <div dir="ltr" class="ss-item ss-item-required ss-text">
                        <div class="ss-form-entry">
                            <label aria-hidden="true" class="ss-q-item-label aria-todo" for="entry_895763809">
                                <div class="ss-q-title">First Name
                                    <label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label>
                                    <span class="ss-required-asterisk">*</span>
                                </div>
                                <div class="ss-q-help ss-secondary-text" dir="ltr"></div>
                            </label>
                            <input type="text" name="entry.895763809" value="" class="ss-q-short" id="entry_895763809" dir="auto" aria-label="First Name  " aria-required="true" required="" title="">
                            <div class="error-message"></div>
                            <div class="required-message"></div>

                        </div>
                    </div>
                </div>
                <div class="ss-form-question errorbox-good">
                    <div dir="ltr" class="ss-item ss-item-required ss-text">
                        <div class="ss-form-entry">
                            <label aria-hidden="true" class="ss-q-item-label aria-todo" for="entry_1324142096">
                                <div class="ss-q-title">Last Name
                                    <label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label>
                                    <span class="ss-required-asterisk">*</span>
                                </div>
                                <div class="ss-q-help ss-secondary-text" dir="ltr"></div>
                            </label>
                            <input type="text" name="entry.1324142096" value="" class="ss-q-short" id="entry_1324142096" dir="auto" aria-label="Last Name  " aria-required="true" required="" title="">
                            <div class="error-message"></div>
                            <div class="required-message"></div>

                        </div>
                    </div>
                </div>
                <div class="ss-form-question errorbox-good" style="width:600px; float:left;">
                    <div dir="ltr" class="ss-item ss-item-required ss-text">
                        <div class="ss-form-entry">
                            <label aria-hidden="true" class="ss-q-item-label aria-todo" for="entry_1845263384">
                                <div class="ss-q-title">Institution or Company
                                    <label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label>
                                    <span class="ss-required-asterisk">*</span>
                                </div>
                                <div class="ss-q-help ss-secondary-text" dir="ltr"></div>
                            </label>
                            <input type="text" name="entry.1845263384" value="" class="ss-q-short" id="entry_1845263384" dir="auto" aria-label="Institution or Company  " aria-required="true" required="" title="">
                            <div class="error-message"></div>
                            <div class="required-message"></div>

                        </div>
                    </div>
                </div>
                <div class="ss-form-question errorbox-good">
                    <div dir="ltr" class="ss-item ss-item-required ss-text">
                        <div class="ss-form-entry">
                            <label aria-hidden="true" class="ss-q-item-label aria-todo" for="entry_1207823519">
                                <div class="ss-q-title">Department
                                    <label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label>
                                    <span class="ss-required-asterisk">*</span>
                                </div>
                                <div class="ss-q-help ss-secondary-text" dir="ltr"></div>
                            </label>
                            <input type="text" name="entry.1207823519" value="" class="ss-q-short" id="entry_1207823519" dir="auto" aria-label="Department  " aria-required="true" required="" title="">
                            <div class="error-message"></div>
                            <div class="required-message"></div>

                        </div>
                    </div>
                </div>
                <div class="ss-form-question errorbox-good" style="width:600px; float:left;">
                    <div dir="ltr" class="ss-item ss-item-required ss-text">
                        <div class="ss-form-entry">
                            <label aria-hidden="true" class="ss-q-item-label aria-todo" for="entry_1402374174">
                                <div class="ss-q-title">Title
                                    <label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label>
                                    <span class="ss-required-asterisk">*</span>
                                </div>
                                <div class="ss-q-help ss-secondary-text" dir="ltr"></div>
                            </label>
                            <input type="text" name="entry.1402374174" value="" class="ss-q-short" id="entry_1402374174" dir="auto" aria-label="Title  " aria-required="true" required="" title="">
                            <div class="error-message"></div>
                            <div class="required-message"></div>

                        </div>
                    </div>
                </div>
                <div class="ss-form-question errorbox-good">
                    <div dir="ltr" class="ss-item ss-item-required ss-text">
                        <div class="ss-form-entry">
                            <label aria-hidden="true" class="ss-q-item-label aria-todo" for="entry_1494020394">
                                <div class="ss-q-title">Email Address
                                    <label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label>
                                    <span class="ss-required-asterisk">*</span>
                                </div>
                                <div class="ss-q-help ss-secondary-text" dir="ltr"></div>
                            </label>
                            <input type="text" name="entry.1494020394" value="" class="ss-q-short" id="entry_1494020394" dir="auto" aria-label="Email Address  " aria-required="true" required="" title="">
                            <div class="error-message"></div>
                            <div class="required-message"></div>

                        </div>
                    </div>
                </div>
                <div class="ss-form-question errorbox-good" style="width:600px; float:left;">
                    <div dir="ltr" class="ss-item  ss-text">
                        <div class="ss-form-entry">
                            <label aria-hidden="true" class="ss-q-item-label aria-todo" for="entry_225770855">
                                <div class="ss-q-title">Street Address Line 1
                                </div>
                                <div class="ss-q-help ss-secondary-text" dir="ltr"></div>
                            </label>
                            <input type="text" name="entry.225770855" value="" class="ss-q-short" id="entry_225770855" dir="auto" aria-label="Street Address Line 1  " title="">
                            <div class="error-message"></div>
                            <div class="required-message"></div>

                        </div>
                    </div>
                </div>
                <div class="ss-form-question errorbox-good">
                    <div dir="ltr" class="ss-item  ss-text">
                        <div class="ss-form-entry">
                            <label aria-hidden="true" class="ss-q-item-label aria-todo" for="entry_1499340779">
                                <div class="ss-q-title">Street Address Line 2
                                </div>
                                <div class="ss-q-help ss-secondary-text" dir="ltr"></div>
                            </label>
                            <input type="text" name="entry.1499340779" value="" class="ss-q-short" id="entry_1499340779" dir="auto" aria-label="Street Address Line 2  " title="">
                            <div class="error-message"></div>
                            <div class="required-message"></div>

                        </div>
                    </div>
                </div>
                <div class="ss-form-question errorbox-good" style="width:600px; float:left;">
                    <div dir="ltr" class="ss-item  ss-text">
                        <div class="ss-form-entry">
                            <label aria-hidden="true" class="ss-q-item-label aria-todo" for="entry_985725457">
                                <div class="ss-q-title">City
                                </div>
                                <div class="ss-q-help ss-secondary-text" dir="ltr"></div>
                            </label>
                            <input type="text" name="entry.985725457" value="" class="ss-q-short" id="entry_985725457" dir="auto" aria-label="City  " title="">
                            <div class="error-message"></div>
                            <div class="required-message"></div>

                        </div>
                    </div>
                </div>
                <div class="ss-form-question errorbox-good">
                    <div dir="ltr" class="ss-item  ss-text">
                        <div class="ss-form-entry">
                            <label aria-hidden="true" class="ss-q-item-label aria-todo" for="entry_628445851">
                                <div class="ss-q-title">State
                                </div>
                                <div class="ss-q-help ss-secondary-text" dir="ltr"></div>
                            </label>
                            <input type="text" name="entry.628445851" value="" class="ss-q-short" id="entry_628445851" dir="auto" aria-label="State  " title="">
                            <div class="error-message"></div>
                            <div class="required-message"></div>

                        </div>
                    </div>
                </div>
                <div class="ss-form-question errorbox-good" style="width:600px; float:left;">
                    <div dir="ltr" class="ss-item  ss-text">
                        <div class="ss-form-entry">
                            <label aria-hidden="true" class="ss-q-item-label aria-todo" for="entry_830119639">
                                <div class="ss-q-title">Zip Code
                                </div>
                                <div class="ss-q-help ss-secondary-text" dir="ltr"></div>
                            </label>
                            <input type="text" name="entry.830119639" value="" class="ss-q-short" id="entry_830119639" dir="auto" aria-label="Zip Code  " title="">
                            <div class="error-message"></div>
                            <div class="required-message"></div>

                        </div>
                    </div>
                </div>
                <div class="ss-form-question errorbox-good">
                    <div dir="ltr" class="ss-item ss-item-required ss-text">
                        <div class="ss-form-entry">
                            <label aria-hidden="true" class="ss-q-item-label aria-todo" for="entry_103516573">
                                <div class="ss-q-title">Phone Number
                                    <label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label>
                                    <span class="ss-required-asterisk">*</span>
                                </div>
                                <div class="ss-q-help ss-secondary-text" dir="ltr"></div>
                            </label>
                            <input type="text" name="entry.103516573" value="" class="ss-q-short" id="entry_103516573" dir="auto" aria-label="Phone Number  " aria-required="true" required="" title="">
                            <div class="error-message"></div>
                            <div class="required-message"></div>

                        </div>
                    </div>
                </div>
                <div class="ss-form-question errorbox-good" style="margin-left:98px; float:left;">
                    <div dir="ltr" class="ss-item  ss-text">
                        <div class="ss-form-entry">
                            <label aria-hidden="true" class="ss-q-item-label aria-todo" for="entry_1931785670">
                                <div class="ss-q-title">Twitter Handle
                                </div>
                                <div class="ss-q-help ss-secondary-text" dir="ltr"></div>
                            </label>
                            <input type="text" name="entry.1931785670" value="" class="ss-q-short" id="entry_1931785670" dir="auto" aria-label="Twitter Handle  " title="">
                            <div class="error-message"></div>
                            <div class="required-message"></div>

                        </div>
                    </div>
                </div>
                <div class="ss-form-question errorbox-good" style="width:300px; margin-left:600px; margin-top:20px;">
                    <div dir="ltr" class="ss-item  ss-radio">
                        <div class="ss-form-entry">
                            <label aria-hidden="true" class="ss-q-item-label aria-todo" for="entry_1262089105">
                                <div class="ss-q-title">How did you hear about the Seminar?
                                </div>
                                <div class="ss-q-help ss-secondary-text" dir="ltr"></div>
                            </label>

                            <ul class="ss-choices" role="radiogroup" aria-label="How did you hear about the Seminar?  ">
                                <li class="ss-choice-item">
                                    <label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.875862958" value="University Contact" id="group_875862958_1" role="radio" class="ss-q-radio" aria-label="University Contact" ></span>
                                        <span class="ss-choice-label" style="margin-right:50px;">University Contact</span>
                                    </label>
                                </li>
                                <li class="ss-choice-item">
                                    <label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.875862958" value="Aruba Contact" id="group_875862958_2" role="radio" class="ss-q-radio" aria-label="Aruba Contact"></span>
                                        <span class="ss-choice-label" style="margin-right:50px;">Aruba Contact</span>
                                    </label>
                                </li>
                                <li class="ss-choice-item">
                                    <label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.875862958" value="Brocade Contact" id="group_875862958_3" role="radio" class="ss-q-radio" aria-label="Brocade Contact"></span>
                                        <span class="ss-choice-label" style="margin-right:50px;">Brocade Contact</span>
                                    </label>
                                </li>
                                <li class="ss-choice-item" style="margin-right:50px;">
                                    <label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.875862958" value="Other" id="group_875862958_4" role="radio" class="ss-q-radio" aria-label="Other"></span>
                                        <span class="ss-choice-label">Other</span>
                                </li>
                            </ul>
                            <div class="error-message"></div>
                            <div class="required-message"></div>
                        </div>
                    </div>
                </div>
                <div class="ss-form-question errorbox-good" style="margin-left:115px; margin-top:-90px; float:left;">
                    <div dir="ltr" class="ss-item  ss-paragraph-text">
                        <div class="ss-form-entry">
                            <label aria-hidden="true" class="ss-q-item-label aria-todo" for="entry_802038510">
                                <div class="ss-q-title">Is there a topic on the Agenda that you are most
                                    <br/>interested in hearing about?
                                </div>
                                <div class="ss-q-help ss-secondary-text" dir="ltr"></div>
                            </label>
                            <textarea name="entry.802038510" rows="10" cols="50" class="ss-q-long" id="entry_802038510" dir="auto" aria-label="Is there a topic on the Agenda that you are most interested in hearing about?  "></textarea>
                            <div class="error-message"></div>
                            <div class="required-message"></div>

                        </div>
                    </div>
                </div>
                <input type="hidden" name="draftResponse" value="[,,&quot;3761447958269286719&quot;]
">
                <input type="hidden" name="pageHistory" value="0">

                <input type="hidden" name="fbzx" value="3761447958269286719">

                <div class="ss-item ss-navigate">
                    <table id="navigation-table">
                        <tbody>
                            <tr>
                                <td class="ss-form-entry goog-inline-block" id="navigation-buttons" dir="ltr" style="width:0px;">
                                    <input type="submit" name="submit" value="Submit" id="ss-submit" style="margin-left:115px; width:300px; height: 50px; margin-top:0px; float:right; margin-top:50px;">
                </div>
</div>
</div>
</center>

<div id="docs-aria-speakable" class="docs-a11y-ariascreenreader-speakable docs-offscreen" aria-live="assertive" role="region" aria-atomic></div>
</div>

<script type='text/javascript' src='/static/forms/client/js/2116918858-formviewer_prd.js'></script>
<script type="text/javascript">
    H5F.setup(document.getElementById('ss-form'));
    _initFormViewer(
        "[100,\x22#ccc\x22,[]\n]\n");
</script>
</div>

1 个答案:

答案 0 :(得分:0)

  1. 将您的<a name...更改为<a id...name已不再受支持,但可能仍有效。
  2. 您有一个名为“signup”的链接锚和一个名为“signup”的div标记。由于命名冲突,链接不知道要去哪个锚点。我建议将链接锚更改为<a id="signupAnchor">或类似。