Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Jan 2005
    Location
    Bedford, UK
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Linking to a page and then scrolling that page with JavaScript

    Hello everyone,

    I would appreciate any help you could give me. I've designed a set of pages for a class (Open University, UK) with several "position:fixed" elements (or IE emulations of "position:fixed") and my main content scrolls under a fixed header. I'm quite pleased with the design, however I haven't been able to link to internal anchors in the normal way. The following

    Code:
    <a href="#note1">Note 1</a>
    results in "Note 1" appearing at the top of the page where it is concealed by my fixed header. I've got around this by scrolling to where I want my link to go, as in

    Code:
    <a href="javascript:window.scrollTo(0,300)">Note 1</a>
    In fact I changed this to

    Code:
    <a href="javascript:window.location.href='#';window.scrollTo(0,300)" target="_self">Note 1</a>
    so I can use

    Code:
    <a href="javascript:history.go(-1)">Back</a>
    to make it convenient for the user to return to where they were in my content after reading "Note 1".

    I would like to be able to do something similar on linking to anchors on another of my pages, so I wrote a function like the following

    Code:
    function internalLink(uri, Ydistance) {
    	window.location.href=uri;
    	window.scrollTo(0, Ydistance)
    }
    and stored it in a linked .js file. It works OK if I call it with

    Code:
    <a href="javascript:internalLink('#',300)" target="_self">Note 1</a>
    and I naively thought it would work with

    Code:
    <a href="javascript:internalLink('page2.html',150)">Header 1</a>
    but it doesn't work. The link to page2.html works, but it doesn't scroll.

    Does anyone know how I can link to another page (which links to the same .js file) and then scroll that page using JavaScript?

    Thanks

    Jeff
    Last edited by jeffnovis; 01-29-2005 at 03:12 PM.

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You are making things much harder than they are intended to be...
    The anchor tag is used for this by naming the anchor....

    IE: on page2.html <a name="header1"></a>header1 contents

    And call the link from any other page to scroll to the named anchor...
    <a href="page2.html#header1">Header 1</a>

    .....Willy

  • #3
    New Coder
    Join Date
    Jan 2005
    Location
    Bedford, UK
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks Willy

    Thanks for your reply Willy,

    Yes, I would normally link to a named anchor in another page as you suggest. However, the unusual design of my pages is such that any named anchor I link to disappears under my header. I realize I can put the named anchor a little higher up the page, but that seemed a rather ugly solution to me.

    I imagine the only way to scroll the other page would be to put the scrolling code in the window.onload event. However, that would only work for one anchor, and I've got several. Never mind. I'll think of something.

    Thanks again,

    Jeff

  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No, I do not understand how the named anchor would appear under the header unless the header was scrolling with the document to always appear on the top of the viewport... In which case, this reminds me of back when, when people tried to hide banner ads by loading the page and onload scrolling several hundred pixels down so the banner ads of free hosts such as Angelfire were no longer visible...

    Perhaps if you provide a link someone could provide more knowledgeable feedback and a possible solution...

    .....Willy

  • #5
    New Coder
    Join Date
    Jan 2005
    Location
    Bedford, UK
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello Willy,

    I've put what I've got so far up on my personal webspace for you to see. I did have buttons and an option box in the left margin for users to choose their preferred font size and screen colors. They worked OK, but I thought that might be over-doing it a bit as this is only for a freshman course assignment. Consequently, I dispensed with the .js file I mentioned in an earlier posting.

    I've put three links on the index page so you can see what I mean about the anchors disappearing under my header. These are intended to link to the second paragraph on the same page starting "HERE!!!!"

    I think I'll give up on the idea of scrolling to footnotes, etc., as it doesn't work in IE because of the dodgy CSS I've used to get IE6 to emulate position:fixed (I think the whole page will scroll as normal in IE5.) I added target="_parent" to the ordinary links because my JavaScript "Back" link (next to "HERE!!!!") doesn't work without it in IE. I suppose the simplest solution is to move the anchors up a couple of lines as I have in my second link.

    See what you think. I may have got lots of things wrong as I'm only a beginner at this.

    http://www.btinternet.com/~Jeff_Novi..._03/index.html

    Thanks

    Jeff

  • #6
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, I see what you mean... You're using overflow:hidden and the internal link is partially obscured within the overflow... Try adding some padding and/or margins to your <a name...> and see if that pushes it down some...

    Your document looks nice and is well coded... I would not advise using a javascript solution in that your page will fail to function properly for those with javascript disabled... I think you should be able to fix this by using CSS but you would be better off posting in the HTML/CSS section of this board and ask those their what they think...

    .....Willy

  • #7
    New Coder
    Join Date
    Jan 2005
    Location
    Bedford, UK
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Willy,

    It hadn't occurred to me to put padding in the <a> tag. I'll give that a Whirl.

    Regards,

    Jeff

  • #8
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try moving the named anchor above the <p> tag also rather than inline... I do think your answer lies within CSS and the guru's over at HTML/CSS should be able to straighten you out... I merely peck about with CSS and although knowledgeable I am not qualified to offer assistance in that regards....

    .....Willy

  • #9
    New Coder
    Join Date
    Jan 2005
    Location
    Bedford, UK
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You were spot on Willy!

    The padding (rather than the margin) did the trick.

    http://www.btinternet.com/~Jeff_Novi..._03/index.html

    Thanks very much for your help.

    Regards,

    Jeff

  • #10
    New Coder
    Join Date
    Jan 2005
    Location
    Bedford, UK
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Damn! I just tried it in IE and it doesn't work!

    I'll ask the CSS gurus as you suggest.

    Regards,

    Jeff


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •