/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Locating 1st anchor text display

Copy linkTweet thisAlerts:
Jan 06.2017

I have created a “fixed” header (with scrolling) section and a “fixed” scrolling content section. (See code below).

What I cannot figure out is why when I click on the anchors that should take me to the top of the content section, it starts several lined below the actual start. This means that the “top” display is scrolled up to the point were it is not seen.

Is this a simple problem to solved or does it relate to the fact that the CSS is forcing the actual “top” to be under the “fixed heading section”?

The desire is to click on a heading link and go to the correct content section.
And within the content to be able to click on a link and go to the actual top of the section.

Here is the code I am currently using:

[code]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />

<title> Scroll Under Fixed </title>
<style type=”text/css”>
/* Modified from: http://forums.devshed.com/css-help-116/content-div-scroll-header-div-338352.html */
body { padding: 155px 0 0 0; }
#header {
padding: 10px;
position: fixed;
top: 0;
left: 5px;
max-height: 150px;
width: 97%;
border:1px solid blue;
background-color: #ddd;
overflow: scroll;
display: block;
}
#content { /* long table goes here */
margin-top: 20px;
text-align: left;
display: block;
width: 99%;
padding: 5px;
line-height: normal;
font-style: normal;
border:1px solid blue;
font-weight: normal;
}
</style>

</head>
<body>
<div id=”header”></a>
<a href=”#top”> Header section 1 </a><p>
Header section 2<p>
Header section 3<p>
Header section 4<p>
Header section 5<p>
Header section 6<p>
Header section 7<p>
Header section 8<p>
Header section 9<p>
<a href=”#last”> Header section 10 </a><p>
</div>

<div id=”content”>
<h2 id=”top”> Content section 1 </h2><p>
Content section 2<p>
Content section 3<p>
Content section 4<p>
Content section 5<p>
Content section 6<p>
Content section 7<p>
Content section 8<p>
Content section 9<p>
<h2>Content section 10</h2> <a href=”#top”>top</a><p>
Content section 11<p>
Content section 12<p>
Content section 13<p>
Content section 14<p>
Content section 15<p>
Content section 16<p>
Content section 17<p>
Content section 18<p>
Content section 19<p>
<h2>Content section 10</h2> <a href=”#top”>top</a><p>
Content section 21<p>
Content section 22<p>
Content section 23<p>
Content section 24<p>
Content section 25<p>
Content section 26<p>
Content section 27<p>
Content section 28<p>
Content section 29<p>
<h2 id=”last”>Content section 30</h2> <a href=”#top”>top</a><p>
</div>

</body>
</html>
[/code]

to post a comment
HTML

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@cootheadJan 06.2017 — Hi there JMRKER,

[indent]

that is the correct way for the anchor to behave.

It will always go as near as possible to the top of the window.

Personally, I would do away with the fixed #header altogether.

[/indent]

[i]coothead[/i]
Copy linkTweet thisAlerts:
@JMRKERauthorJan 07.2017 — Thanks 'coothead', for the information.

I made a second attempt and it does what I want at this time.

Even simpler CSS. ?

<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8" /&gt;

&lt;title&gt; dual scrolling &lt;/title&gt;
&lt;style type="text/css"&gt;
#header { height:200px; overflow: auto }
#content { height:600px; overflow: auto }
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div id="header"&gt;
&lt;a href="#top"&gt; Header section 1 &lt;/a&gt;&lt;p&gt;
&lt;a href="#sect2"&gt; Header section 2 &lt;/a&gt;&lt;p&gt;
&lt;a href="#sect3"&gt; Header section 3 &lt;/a&gt;&lt;p&gt;
&lt;a href="#sect4"&gt; Header section 4 &lt;/a&gt;&lt;p&gt;
&lt;a href="#sect5"&gt; Header section 5 &lt;/a&gt;&lt;p&gt;
&lt;a href="#sect6"&gt; Header section 6 &lt;/a&gt;&lt;p&gt;
&lt;a href="#sect7"&gt; Header section 7 &lt;/a&gt;&lt;p&gt;
&lt;a href="#sect8"&gt; Header section 8 &lt;/a&gt;&lt;p&gt;
&lt;a href="#sect9"&gt; Header section 9 &lt;/a&gt;&lt;p&gt;
&lt;a href="#sect10"&gt; Header section 10 &lt;/a&gt;&lt;p&gt;

&lt;a href="#sect11"&gt; Header section 11 &lt;/a&gt;&lt;p&gt;
&lt;a href="#sect12"&gt; Header section 12 &lt;/a&gt;&lt;p&gt;
&lt;a href="#sect13"&gt; Header section 13 &lt;/a&gt;&lt;p&gt;
&lt;a href="#sect14"&gt; Header section 14 &lt;/a&gt;&lt;p&gt;
&lt;a href="#sect15"&gt; Header section 15 &lt;/a&gt;&lt;p&gt;
&lt;a href="#sect16"&gt; Header section 16 &lt;/a&gt;&lt;p&gt;
&lt;a href="#sect17"&gt; Header section 17 &lt;/a&gt;&lt;p&gt;
&lt;a href="#sect18"&gt; Header section 18 &lt;/a&gt;&lt;p&gt;
&lt;a href="#sect19"&gt; Header section 19 &lt;/a&gt;&lt;p&gt;
&lt;a href="#sect20"&gt; Header section 20 &lt;/a&gt;&lt;p&gt;

&lt;a href="#sect21"&gt; Header section 21 &lt;/a&gt;&lt;p&gt;
&lt;a href="#sect22"&gt; Header section 22 &lt;/a&gt;&lt;p&gt;
&lt;a href="#sect23"&gt; Header section 23 &lt;/a&gt;&lt;p&gt;
&lt;a href="#sect24"&gt; Header section 24 &lt;/a&gt;&lt;p&gt;
&lt;a href="#sect25"&gt; Header section 25 &lt;/a&gt;&lt;p&gt;
&lt;a href="#sect26"&gt; Header section 26 &lt;/a&gt;&lt;p&gt;
&lt;a href="#sect27"&gt; Header section 27 &lt;/a&gt;&lt;p&gt;
&lt;a href="#sect28"&gt; Header section 28 &lt;/a&gt;&lt;p&gt;
&lt;a href="#sect29"&gt; Header section 29 &lt;/a&gt;&lt;p&gt;
&lt;a href="#last"&gt; Header section 30 &lt;/a&gt;&lt;p&gt;
&lt;/div&gt;

&lt;p&gt;

&lt;div id="content"&gt;
&lt;h2 id="top"&gt; Content section 1 &lt;/h2&gt;&lt;p&gt;
&lt;h2 id="sect2"&gt; Content section 2 &lt;/h2&gt;&lt;p&gt;
&lt;h2 id="sect3"&gt; Content section 3 &lt;/h2&gt;&lt;p&gt;
&lt;h2 id="sect4"&gt; Content section 4 &lt;/h2&gt;&lt;p&gt;
&lt;h2 id="sect5"&gt; Content section 5 &lt;/h2&gt;&lt;p&gt;
&lt;h2 id="sect6"&gt; Content section 6 &lt;/h2&gt;&lt;p&gt;
&lt;h2 id="sect7"&gt; Content section 7 &lt;/h2&gt;&lt;p&gt;
&lt;h2 id="sect8"&gt; Content section 8 &lt;/h2&gt;&lt;p&gt;
&lt;h2 id="sect9"&gt; Content section 9 &lt;/h2&gt;&lt;p&gt;
&lt;h2 id="sect10"&gt; Content section 10&lt;/h2&gt; &lt;a href="#top"&gt;top&lt;/a&gt;&lt;p&gt;

&lt;h2 id="sect11"&gt; Content section 11 &lt;/h2&gt;&lt;p&gt;
&lt;h2 id="sect12"&gt; Content section 12 &lt;/h2&gt;&lt;p&gt;
&lt;h2 id="sect13"&gt; Content section 13 &lt;/h2&gt;&lt;p&gt;
&lt;h2 id="sect14"&gt; Content section 14 &lt;/h2&gt;&lt;p&gt;
&lt;h2 id="sect15"&gt; Content section 15 &lt;/h2&gt;&lt;p&gt;
&lt;h2 id="sect16"&gt; Content section 16 &lt;/h2&gt;&lt;p&gt;
&lt;h2 id="sect17"&gt; Content section 17 &lt;/h2&gt;&lt;p&gt;
&lt;h2 id="sect18"&gt; Content section 18 &lt;/h2&gt;&lt;p&gt;
&lt;h2 id="sect19"&gt; Content section 19 &lt;/h2&gt;&lt;p&gt;
&lt;h2 id="sect20"&gt; Content section 20&lt;/h2&gt; &lt;a href="#top"&gt;top&lt;/a&gt;&lt;p&gt;

&lt;h2 id="sect21"&gt; Content section 21 &lt;/h2&gt;&lt;p&gt;
&lt;h2 id="sect22"&gt; Content section 22 &lt;/h2&gt;&lt;p&gt;
&lt;h2 id="sect23"&gt; Content section 23 &lt;/h2&gt;&lt;p&gt;
&lt;h2 id="sect24"&gt; Content section 24 &lt;/h2&gt;&lt;p&gt;
&lt;h2 id="sect25"&gt; Content section 25 &lt;/h2&gt;&lt;p&gt;
&lt;h2 id="sect26"&gt; Content section 26 &lt;/h2&gt;&lt;p&gt;
&lt;h2 id="sect27"&gt; Content section 27 &lt;/h2&gt;&lt;p&gt;
&lt;h2 id="sect28"&gt; Content section 28 &lt;/h2&gt;&lt;p&gt;
&lt;h2 id="sect29"&gt; Content section 29 &lt;/h2&gt;&lt;p&gt;
&lt;h2 id="last"&gt; Content section 30&lt;/h2&gt; &lt;a href="#top"&gt;top&lt;/a&gt;&lt;p&gt;

&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
×

Success!

Help @JMRKER spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...