[FIXED] How to scroll to post link in Wordpress

Issue

My 'hero' element is taking most of the top page, and an user would have to manually scroll past it to get to the content.

I want to change it so that clicking the links will scroll past the image and down to the posts title. At the minute, clicking the post reloads the page and the hero element is on top. But if you click 'more' tag, it scrolls nicely.

How do I make it so that clicking the link will scroll the page down in Wordpress? I don't mean 'more' tag. Maybe there is a way to update the link functions in WP so the links will create anchor like 'more' tag?

I haven`t got a code that creates a link, as they are created by WP (they are post links).

<div class="big">

</div>

<article><div class="post">
if (have_posts()) :
    while (have_posts()) : the_post(); ?>
  <?php the_content(); ?>
</div></article>

.big {
  height: 1200px;
  width: 900px;
  background-color: grey;
}

JS Fiddle: https://jsfiddle.net/tvue1mwo/

single.php code:

<?php
if (is_single()) {
    // Currently using get_header('posts'), so I can hide hero element by css and unhide it with js

    get_header('posts');

    // If I understand right, here should go the ANCHOR link?
}
else {
    // Loads normal hero withou extra css class
    get_header();
}
?>
<div class="main-section wrapper">
<?php
    if (have_posts()) :
        while (have_posts()) : the_post(); ?>
    <div class="post-content u-cf">
        <h2 class="post"><a href="<?php the_permalink(); ?>">
            <?php the_title(); ?></a></h2>
            <p class="post-info"><i class="fa fa-folder-open" aria-hidden="true"></i>  
                <?php 
                $categories = get_the_category(); 
                $separator = ", ";
                $output = '';
                if ($categories) {
                    foreach ($categories as $category) {
                        $output .= '<a href="' . get_category_link($category->term_id) . '">' . $category->cat_name . '</a>' . $separator;
                    }
                    echo trim($output, $separator);
                }
                ?>
                |
                <i class="fa fa-clock-o" aria-hidden="true"></i> <?php the_time('j/m/Y'); ?>
            </p>
            <div class="banner-image"><?php the_post_thumbnail('banner-image'); ?></div>
            <?php the_content(); ?>
        <?php endwhile; ?>
    </div>
    <?php
    else :
        echo '<p> No Content found</p>';
    endif; ?>
</div>
<?php get_footer(); ?>

index.php:

<?php 
if (have_posts()) :?>
<?php $count = 1; 
while (have_posts()) : the_post(); ?>

<div class="post-content u-cf">

    <?php if (has_post_thumbnail()) {
        ?>
        <div class="post-thumbnail u-cf"><a href="<?php the_permalink(); ?>">
            <?php the_post_thumbnail('small-thumbnail')  ?></a>
        </div>
        <?php } ?>

        <h2 class="post">
            <a href="<?php the_permalink(); ?>">
                <?php the_title(); ?>
            </a>
        </h2>

        <p class="post-info"><i class="fa fa-folder-open" aria-hidden="true"></i>  
            <?php 
            $categories = get_the_category(); 
            $separator = ", ";
            $output = '';

            if ($categories) {

                foreach ($categories as $category) {
                    $output .= '<a href="' . get_category_link($category->term_id) . '">' . $category->cat_name . '</a>' . $separator;
                }

                echo trim ($output, $separator);
            }
            ?>
            |<i class="fa fa-clock-o" aria-hidden="true"></i> <?php the_time('j/m/Y'); ?>
        </p>

        <?php the_content(); ?>
        <hr>

        <?php   if ( 2 === $count ) { ?>

        <div class="main-content-advert">
            <p>Lorem ipsum</p><p>Lorem impsum</p>
        </div>
        <hr>

        <?php }

        $count++; ?>  
    <?php endwhile; ?>

</div>
<?php
else :
    echo '<p> No Content found</p>';

endif; ?>

Solution

If you are using index.php to display the homepage & archives, you can do the following:

<?php 
/* 1. define the name of the anchor to jump to */
$anchorname = "skipheroimage"; 
$count = 0;

if (have_posts()) :
    while (have_posts()) : the_post(); 
    ?>
        <?php 
        $count++; /* increment the count so that each anchor is unique on the page */
        /* 2. add the anchor to the permalink so it will jump directly to the anchor  */
        $linkwithanchor = get_permalink()."#".$anchorname.$count; 
        ?>

        <div class="post-content u-cf">
            /* 3. use our $linkwithanchor variable to create the link */
            <h2 class="post"><a href="<?php echo $linkwithanchor; ?>"> 
            <?php the_title(); ?></a></h2>


            /* no change to the code that was here, so keep it as it was...
               ... I just removed it to make my changes easier to find */


            <div class="banner-image"><?php the_post_thumbnail('banner-image'); ?></div>

             /* 4. add our anchor - this is where the link will jump to */
            <a id="<?php echo $anchorname.$count; ?>" name="<?php echo $anchorname.$count; ?>"></a>
            <?php the_content(); ?>
        </div> /* NOTE  - you had this in the wrong place. */
   <?php endwhile; ?>
<?php
else :
    echo '<p> No Content found</p>';
endif; ?>

This will create an anchor directly after the banner image, and add the anchor name to the link so that it will jump directly to it.

I have commented and numbered each step directly in the code.

You will need to do this for any templates you have that displays the links (e.g. archive.php)

Answered By - FluffyKitten

Answer Checked By - Cary Denson (PHPFixing Admin)