SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: NEED SOME HELP

Hybrid View

  1. #1
    SitePoint Enthusiast mslee's Avatar
    Join Date
    Dec 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    NEED SOME HELP

    I WOULD LIKE TO KNOW WHEN I CLICK ON THE LINK ON THE BOTTOM OF THE PAGE I WANT THE FOCUS TO STAY AT THE BOTTOM OF THE PAGE AND NOT SHOOT TO THE TOP OF THE PAGE.

    IS THIS WRITTEN IN HTML? I HOPE THIS MAKES SENSE ?

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,733
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    IS THIS WRITTEN IN HTML?
    All web pages are written in some sort of HTML variant. So unles syou are not viewing a web page ( and are istead dealing with an app??) the answer is most likely "yes";


    What you are asking is not actually possible, off the bat. A HYPERLINK (<a href='some.url'>) directs the focus to a given location ( noted in the href attribute) and not a "scroll position". It wouln't even make sense to do it any other way! So Maybe what you want is not only to link to a specific page but a specific piece of content on a page, that is easy enough to code


    On the TARGET PAGES ( the page with the content you want to go to) add an ID to the outermost tag of the desired content, this is often referred to as an ANCHOR

    EXAMPLE, in the document page.html:
    <BODY>
    ...other code...
    <div id="straightHere">
    the deisred content
    </div>
    --other content
    </BODY>

    and when you want the link to go straight to it:
    <a href='page.html#straightHere'>



    If if the link refers to an anchor on the same document (page) then you don't even need the document name , and you can do this:
    <a href='page.html#straightHere'>

    I hope that helps

  3. #3
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    I use a similar technique when I'm using an anchor to do a button's job: if the anchor's href is an undefined hash name, the page should not reload and the user should not be brought back up to the top of the page.

    For example, if you are using an anchor to do a button's job (run some Javascript or something, and not go to a new page), and you have this:

    <a href="#">CLICK ME</a>

    That "#" refers to the current page, and in every browser I know makes a page refresh, which brings focus to the top of the page.

    To prevent this, I do something like

    <a href="#void">CLICK ME</a>

    Void is not a defined id or name attribute anywhere on my page, so #void is an invalid link. Most browsers will hold the focus on that link and not go to another page nor will they refresh the page.

    However webkit browsers will not necessarily keep the focus on what was clicked, in contrast to Opera, Firefox and I think IE. They'll hold the focus on the last-clicked thing until the user clicks elsewhere. By focus I mean keyboard focus... visual focus won't change, and the user will stay on the right part of the page visually.

    If I'm using an anchor as an in-page destination, and I don't want the user to get thrown to the top of the page if they somehow manage to click the destination, I match the id and the href:

    to use Dresden's example but with an anchor for destination instead of a div
    Quote Originally Posted by dresden
    <a id="straightHere" href="#straightHere"></a>
    <div>
    the desired content
    </div>
    --other content
    </BODY>

    If if the link refers to an anchor on the same document (page) then you don't even need the document name , and you can do this:
    <a href='#straightHere'>
    Like that. I would only use an anchor as destination though if a focusable destination were required.

  4. #4
    SitePoint Member
    Join Date
    Mar 2013
    Location
    Pennsylvania
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can also use JQuery ScrollTo to go to a particular position on the page: http://flesler.blogspot.com/2007/10/jqueryscrollto.html

    I use it on my website: www.dynamicdzine.com


Tags for this Thread

Bookmarks

Posting Permissions

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