/    Sign up×
Community /Pin to ProfileBookmark

Scroll page if Bookmark passed in URL?

Copy linkTweet thisAlerts:
Aug 01.2008

Hopefully this will be a simple solution.

I have a web page with a scrollable table. If a user clicks on a link from a previous page, with a bookmark # flag (i.e. [url]www.webdeveloper.com/test#abc[/url]) it will jump to that bookmark in the table. The problem is that I have a fixed header row, so it will scroll to the top of the table hidden behind the fixed header.

I figure a simple solution would be to scroll the text up with the scroll() command x number of pixels so that the actual data is displayed at the top of the table.

How do I tell my my browser that the URL has a bookmark (maybe look for a ‘#’ in the URL?) so that it will scroll the table if it finds the bookmark flag? I’m fine if it scrolls it a fixed amount (like 50 pixels only for example).

See my site for example: [url]www.gameeer.com[/url] and click on a game. (No, I’m not phishing, just figure it’s a lot easier to do it this way than post a bunch of code.

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@felgallAug 02.2008 — You need to set a top margin on the scrollable content that is the height of the fixed header so that the content doesn't disappear behind the header until you start to scroll it.

<div id="fixedheader" style="position:fixed;height:50px;"></div>

<div id="scrollablecontent" style="margin-top:50px;"></div>

Provided the top margin on the scrollable content is at least the height of the fixed header then it will not start out behind the header.
Copy linkTweet thisAlerts:
@htwingnutauthorAug 02.2008 — Thanks.

My issue isn't that it starts behind the fixed header. It's that if I do a link to a '#' bookmark in the url that it sets the row behind the fixed header that I want on top of the table.
Copy linkTweet thisAlerts:
@htwingnutauthorAug 05.2008 — HELP? Thanks.

Sorry I'm an amateur, but seems like there should be a simple way to do this.
×

Success!

Help @htwingnut 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 5.18,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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