Automatically scroll down to content

  • Resolved khosh

    (@khosh)


    14 years, 11 months ago

    I’m quite new to WordPress, but I browsed and searched the Codex and Forum for an answer, but I couldn’t find anything.

    I need an automatic scrolling or anchor funtion for a page I’m making. The site is located here: https://matiassaarukka.net/testsite

    Since the header is so high the content is left out of view when you click the links for separate pages.

    What I would like is to simply add an anchor tag to each link except the main page, so when visitors click PRESS the new page loads and displays the content farther down on the page.

    This could be achieved with a simple anchor <a name="anchor"> but WordPress won’t allow me to add the anchor to the page permalinks. It automatically removes # (ex: testsite/press#anchor).

    Does anyone have a good idea how this could solved?

Viewing 5 replies - 1 through 5 (of 5 total)

  • You don’t need to add the named anchor to the permalink itself. You just need to add it to the anchor tag that points to the page. In other words, if you have testsite/press, the permalink can be testsite/press. When you create a link to the page just add the named anchor part– testsite/press#anchor. No need to mess with permalink settings.

    Thread Starter khosh

    (@khosh)

    But the thing is that I want to assign the anchor to the links in my navigation menu and those links are created automatically. That way the visitors scroll down past the large header immediately when clicking on any other navigation link except for the main page.

    One way would be to write the menu from scratch into header.php, but then it will be a bit more tedious changing any pages or titles. On the other hand the titles of the pages will not probably change…

    JavaScript + php that recognises which page is loaded?

    So you might need to write your own function to output those links. It should be relatively easy to do. What is outputting those links now?

    Thread Starter khosh

    (@khosh)

    I’m building my theme on Sandbox, so <?php sandbox_globalnav() ?> is outputting the navigation menu.

    But I figured it out ??

    I’m using this javascript in the head:

    <script>
    function goToAnchor(nameAnchor) {
    window.location.hash=nameAnchor;
    }
    </script>

    I want to jump to the anchor on every page except the home page, so I use this:

    <body class=”<?php sandbox_body_class() ?>”
    <?php if (is_front_page()) {
    echo ” “;
    } else {
    echo “onLoad=\”javascript:goToAnchor(‘content’)\””;
    }
    ?>>

    Like everything else there probably exists another solution, but this seems to work well.

    If I would add the anchor to every page link in the navigation menu I wouldn’t get the jump effect to any posts, which I now do.

    I wouldn’t have wanted this solution, but my customer did. I could of course made the header smaller and pulled the page together a bit, but we both liked the design, so we went with this.

    It’s no online at blauefrau.com.

    Considering it’s my first WordPress site I’m quite satisfied. Luckily I’ve learned a lot on the journey, so the next site I make will probably be a lot better and easier to make.

    Good, glad you worked it out. A javascript solution is perfectly acceptable so long as you are OK with it failing when javascript is disabled and in your case that seems pretty minor.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Automatically scroll down to content’ is closed to new replies.