WordPress.org

Forums

[resolved] Page Jump / Same Page Anchor Link / Top of Page (29 posts)

  1. hsatterwhite
    Member
    Posted 5 years ago #

    I recently added a page jump to the top of the page in a template file, but when I load my WordPress install it renders the the page jump anchor link as http://www.domain.com/#top rather than #top

    This results in a wrong link that does not work in Safari and Google Chrome. Is there any to keep WordPress from automatically adding the domain + the forward slash for page jumps coded in to template files?

    Thanks!

  2. vtxyzzy
    Member
    Posted 5 years ago #

    I tried to duplicate the problem in IE8 and Foxfire by putting <p><a href='#test'>Jump to test</a></p> in single.php. However, that did not fail for me. Viewing the page source showed exactly that, with no added code.

    Do you have a plugin that might be affecting anchors?

  3. hsatterwhite
    Member
    Posted 5 years ago #

    I have no other plugins that could be doing this. The only other two plugins that are active are NextGen Gallery and CformsII.

    This is really odd though. If it helps I'm trying to code it in to page.php

  4. vtxyzzy
    Member
    Posted 5 years ago #

    When does the change occur? Is it when you save the modified page.php, or when the page is sent to the browser?

    Can you paste the modified page.php to WordPress pastebin so I can have a look?

  5. hsatterwhite
    Member
    Posted 5 years ago #

    The change occurs when it is rendered in the browser. Browsers I've tried it in include the latest stable releases of Firefox, Safari, and Chrome.
    Paste Bin: Page Jump
    vtxyzzy, thanks for your help thus far!

  6. vtxyzzy
    Member
    Posted 5 years ago #

    Does it make a difference if you use single quotes like this:

    <a href-'#top'>

    I do that out of habit, but it may make a difference.

  7. hsatterwhite
    Member
    Posted 5 years ago #

    Unfortunately it does not make a difference.

  8. vtxyzzy
    Member
    Posted 5 years ago #

    Well, I am out of ideas on this one. If you get it solved, please post the solution back here for future reference.

  9. hsatterwhite
    Member
    Posted 5 years ago #

    Well do and thanks again!

  10. esmi
    Forum Moderator
    Posted 5 years ago #

    Can you post a link to a live page that uses this template so we can see the generated link? Have you tried deactivating both of your active plugins?

  11. Mark / t31os
    Moderator
    Posted 5 years ago #

    Try using ..
    <a href="<?php the_permalink(); ?>#top">Top</a>

    So you end up with a complete link of the current page/post plus the anchor...

  12. hsatterwhite
    Member
    Posted 5 years ago #

    Hi esmi,
    Live page
    It's a horizontally scrolling website, so if you scroll to the right some you'll see the back button/arrow appear, which is what I'm having a problem with.

    I have not deactivated either plugin, however I was having this problem before installing those plugins.

  13. esmi
    Forum Moderator
    Posted 5 years ago #

    Using just #top should work, though - unless there's some funky rewriting going on. Now there's a thought...

    @hsatterwhite: can you try resetting your custom permalinks back to the default (ugly) setting and deleting the .htaccess file in the root WP folder?

  14. Mark / t31os
    Moderator
    Posted 5 years ago #

    The anchor works for me on your page...

    Did you fix it?

  15. hsatterwhite
    Member
    Posted 5 years ago #

    @esmi Ok, I've set the permalinks back to their default and removed the .htaccess file, but we're still seeing the same thing.

  16. hsatterwhite
    Member
    Posted 5 years ago #

    @t31os_ Are you trying it in Firefox? It's work for me in Firefox just fine, but it's unresponsive in Safari/Chrome because WordPress is apending http://www.twoplusonedesign.com/ to #top -- Thanks for trying it out though!

  17. Mark / t31os
    Moderator
    Posted 5 years ago #

    Tried in IE, but parts of the content are missing completely, error on page (according to IE).

    I can't even see the anchor in this case to click it..

  18. hsatterwhite
    Member
    Posted 5 years ago #

    @t31os_ Since changing the permalinks, the links on the side and top nav do not work currently and the back button itself appears when you scroll right thanks to jQuery.

  19. esmi
    Forum Moderator
    Posted 5 years ago #

    Fine for me in Firefox, IE8 and Opera 10

  20. hsatterwhite
    Member
    Posted 5 years ago #

    @esmi and @t31os_ I just tried creating a page jump link on another WordPress 2.9 installation the same way and it also appends the domain plus a trailing slash to #top when rendered in a browser.

    Maybe it's a 2.9 issue? Kind of odd to be honest with you.

  21. Mark / t31os
    Moderator
    Posted 5 years ago #

    Yes i know where the back button is, i'm saying it's missing when rendered in IE for me.

    Firefox works great, IE not so great..

  22. hsatterwhite
    Member
    Posted 5 years ago #

    @t31os_ my mistake on that :) what version of IE?

  23. Mark / t31os
    Moderator
    Posted 5 years ago #

    IE7 , XP SP2 .. ;)

  24. hsatterwhite
    Member
    Posted 5 years ago #

    Hmmm I've done some more digging and I believe this is what will have to be done:
    Link Jumps to More or Top of Page

    I'm going to try it out and see what I get. Thanks again for all the time and help guys!

  25. hsatterwhite
    Member
    Posted 5 years ago #

    @t31os_ cool, thanks for giving me those details.. I've only been working on this site for a while and it still has a LONG way to go. I haven't done any IE bug squashing yet ;-)

  26. Mark / t31os
    Moderator
    Posted 5 years ago #

    No problem, love the photography work by the way .. not a fan of the yellow color on the site, but love the imagery.. ;)

  27. hsatterwhite
    Member
    Posted 5 years ago #

    @t31os_ Thanks, I'll be sure to let my buddy Dustin know you like his work :)

  28. hsatterwhite
    Member
    Posted 5 years ago #

    Hey Everyone,

    Thanks again for checking out this problem I had, but man did it turn out to be a problem more in concept then execution!

    Page jumps are supposed to work with the natural flow of a website; vertically (duh i know). So make a page jump horizontally with out the aid of javascript works in the latest version of Firefox, Opera, and IE8 (as reported by esmi), but not so much in earlier version of IE and the most current versions of Safari and Chrome.

    So, we need to find an alternative to manipulate and force the behavior, so that we can page jump horizontally. After doing separating myself from the website I researched other horizontal sites and found a simple solution: The Tiny Scrollings Javascript Solution

    The horizontal page jumping information can be found towards the bottom of the page. Also here is a working demo of a site that really uses it: Dean Oakley's Portfolio

    Thanks again for all the help and I hope everyone finds this useful!

  29. sunriseweb
    Member
    Posted 4 years ago #

    Also a note when trying to do page jumps in IE - you must place characters between the start and end anchor tag. You do not need to do this with Chrome, Firefox, etc. For example

    Bad:
    <a name="#location1"></a>Location 1

    Good:
    <a name="#location1">Location 1</a>

    This may be rudimentary but it tripped me up because I didn't want the anchor styles applied to my "location" text. Of course I overcame my laziness and defined a new class :-)

Topic Closed

This topic has been closed to new replies.

About this Topic