Anchor points from page titles to post content in page

  • Hi There,

    First time poster here.

    I have a page where I have a list of posts in a category which link to the post content below. When the title is clicked I want the page to scroll to the content using anchor an anchor.

    My problem is, when the titles are being linked to the anchor, it breaks because of the space between the title words.

    Can anyone shed some light on this please? Been banging my head against my desk for hourssss.

    Here is my code for the page.
    <script src=”https://pastebin.com/embed_js.php?i=TT32cP7X”></script&gt;

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

  • I’d change your

    echo "<li><a href=\'#$post_title\

    on line 16

    to be $permalink rather than $post-title, then they should match.

    Thread Starter paddywinz

    (@paddywinz)

    Thanks for the reply Robin,

    However it still isn’t working.

    The website in question is:
    https://www.liftconsultancy.com/lift/strategic-leadership/

    Anyone else?

    “Leadership Development” is the only one working. It’s also the only one that doesn’t have blank space between the last letter of the href and the closing quotation mark.

    Example:

    a href=”#Executive Teams “

    The one that’s working, Leadership Development, takes you to the right spot of the page but doesn’t take into consideration that there’s a sticky nav, so it’s covering the top of that section.

    My comment condensed the blank space in my example. There are 2-3 blank spaces between the last letter ‘s’ and the closing quotation mark in all your hrefs except the one that works.

    Thread Starter paddywinz

    (@paddywinz)

    Thank you so much for the reply guys.

    The culprit was having spaces in the title of the posts.

    My next problem is using jQuery to smooth scroll to the anchors.

    I have removed my scroll class because when it was originally in there, the closing title tag would stop scrolling to the anchor.

    My current code is now:
    This

    and I have my jquery script in my footer:

    <script>
	$(".anchor").click(function(event){
         event.preventDefault();
         //calculate destination place
         var dest=0;
         if($(this.hash).offset().top > $(document).height()-$(window).height()){
              dest=$(document).height()-$(window).height();
         }else{
              dest=$(this.hash).offset().top;
         }
         //go to destination
         $('html,body').animate({scrollTop:dest}, 2000,'swing');
     });
</script>

    Currently I have this at line 17:
    echo "<li><a href='#$post_title' title='$post_title'>$post_title</a></li>";

    But to trigger the script I need to give it a class like so:
    echo "<li><a class='anchor' href='#$post_title' title='$post_title'>$post_title</a></li>";

    When I use this it stops scrolling to the anchor.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Anchor points from page titles to post content in page’ is closed to new replies.

Tags