• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 117
  • Last Modified:

Jump links not quite lining up

Why do my jump links (anchor links) not get me to the specific spot that I set it to take me to?  For example, I want you to be able to click on a service and have it jump down to the h2 of that service you clicked on.  Even though ID is attached to h2, it takes you to the content not the h2 of that service.  When you click Back to top, you only go up a little bit on the page.  I would like it to fully go up to the top of the page.

http://380.38e.myftpupload.com/services
0
nsitedesigns
Asked:
nsitedesigns
  • 8
  • 6
  • 2
  • +2
4 Solutions
 
Dave BaldwinFixer of ProblemsCommented:
You have <div id="top"></div> right above Acupuncture which is where 'Back to top' will go.  You have to move it higher on the page.

In Firefox, I don't see any problems with the 'jump links'.
1
 
nsitedesignsAuthor Commented:
This is a wordpress site.  I don't know how I can "move it higher" since it as high as I can get it on the page itself.  Maybe I need to add it to header.php?  Not sure...
0
 
Dave BaldwinFixer of ProblemsCommented:
I don't know what is in header.php so I can't tell you.  If it is the 'top content', that might work.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Ray PaseurCommented:
I don't know whether this has any bearing on the problem, but you really need to have valid HTML markup.  Here is what the validator has to say about things:
https://validator.w3.org/nu/?doc=http%3A%2F%2F380.38e.myftpupload.com%2Fservices%2F

And as I look at it, the #top is not really at the top.  Here's an excerpt of the HTML showing where I think the #top might work better.
<body class="page page-id-17 page-template-default custom-header header-image content-sidebar magazine-pro-blue" itemscope itemtype="http://schema.org/WebPage">

<!-- INSERTED THE TAG HERE -->
<div id="top"></div>


<div class="site-container">
<header class="site-header" itemscope itemtype="http://schema.org/WPHeader">
<div class="wrap">
<div class="title-area">
<p class="site-title" itemprop="headline"><a href="http://380.38e.myftpupload.com/">Healthy Living Acupuncture</a></p>
<p class="site-description" itemprop="description">Acupuncture and Traditional Chinese Medicine</p>
</div>
<div class="widget-area header-widget-area">
<section id="text-2" class="widget widget_text">
<div class="widget-wrap">          
<div class="textwidget">
<h2>Call for an Appointment</h2>
<p>(920) 893-8796<br />
(877) 580-4396</p>
</div>
</div>
</section>
</div>
</div>
</header>

<nav class="nav-secondary" itemscope itemtype="http://schema.org/SiteNavigationElement"><div class="wrap"><ul id="menu-main-menu" class="menu genesis-nav-menu menu-secondary"><li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68"><a href="http://380.38e.myftpupload.com/" itemprop="url"><span itemprop="name">Home</span></a></li>
<li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-17 current_page_item menu-item-66"><a href="http://380.38e.myftpupload.com/services/" itemprop="url"><span itemprop="name">Services</span></a></li>
<li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"><a href="http://380.38e.myftpupload.com/forms/" itemprop="url"><span itemprop="name">Forms</span></a></li>
<li id="menu-item-190" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-190"><a href="#" itemprop="url"><span itemprop="name">Staff</span></a>
<ul class="sub-menu">
    <li id="menu-item-181" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-181"><a href="http://380.38e.myftpupload.com/acupuncturists/" itemprop="url"><span itemprop="name">Acupuncturists</span></a></li>
    <li id="menu-item-188" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-188"><a href="http://380.38e.myftpupload.com/support-staff/" itemprop="url"><span itemprop="name">Support  Staff</span></a></li>
</ul>
</li>
<li id="menu-item-216" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-216"><a href="http://380.38e.myftpupload.com/newsletter/" itemprop="url"><span itemprop="name">Newsletter</span></a></li>
<li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-64"><a href="http://380.38e.myftpupload.com/contact-healthy-living-acupuncture-wellness/" itemprop="url"><span itemprop="name">Contact Us</span></a></li>
</ul></div></nav><div class="site-inner"><div class="content-sidebar-wrap"><main class="content"><article class="post-17 page type-page status-publish entry" itemscope itemtype="http://schema.org/CreativeWork">
<header class="entry-header"><h1 class="entry-title" itemprop="headline">Services</h1> 
</header><div class="entry-content" itemprop="text"><div class='mailmunch-forms-before-post' style='display: none !important;'></div>

<!-- REMOVED THE ID FROM THIS TAG -->
<div>
<img class="alignright size-full wp-image-223" src="http://380.38e.myftpupload.com/wp-content/uploads/2016/09/dreamstime_xs_4554584.jpg" alt="dreamstime_xs_4554584" width="480" height="360" />
Acupuncture carries a very low risk of adverse effects. It has been endorsed by the United States&#8217; National Institutes of Health, the World Health Organization, 
and the National Center for Complementary and Alternative Medicine. 
<a href="http://380.38e.myftpupload.com/contact-healthy-living-acupuncture-wellness/">Contact us</a> 
for an appointment.
</div>

<p><a href="#acupuncture">Acupuncture</a><br />
<a href="#cupping">Cupping Treatments</a><br />
<a href="#electroacupuncture">Electroacupuncture</a><br />
<a href="#guasha">Gua Sha</a><br />
// etc, etc

Open in new window

0
 
Julian HansenCommented:
There is a trick you can use to get around this. Use some javascript to add an id to the <body> element of the page. Then point your back to top links to that
<script>$(function() {
  $('body').attr('id','top-of-page');
});</script>

Open in new window

Then make all your back to top links #top-of-page
1
 
nsitedesignsAuthor Commented:
How do I modify the body tag on a wordpress site?
0
 
Julian HansenCommented:
Did you try the script above?
0
 
nsitedesignsAuthor Commented:
HOw do I modify a body tag on a wordpress site?  I can easily do it on an html site but am not sure how to do it on a wordpress site.
0
 
Julian HansenCommented:
You would have to edit the template BUT if you do a template update will overwrite that.

Why not use the script I gave you earlier? You can put that into any page and it will modify the body tags.
0
 
nsitedesignsAuthor Commented:
I have a child template.  The original scrip said to add to body, that was what I was confused about.  How do I add to body?

<script>$(function() {
  $('body').attr('id','top-of-page');
});</script>
0
 
Julian HansenCommented:
The original scrip said to add to body, that was what I was confused about.  How do I add to body
What script are we talking about?
I thought the question was about how to make your go to top links go to the top of the page?
The JavaScript solution will add an id to the <body> tag so that you can use in your links.
That script can go anywhere on the page - you can put it in your child template or on any page.
I am not sure I understand what the problem is here?
1
 
nsitedesignsAuthor Commented:
Sorry, was out sick...

I didn't know I could put the following on a child theme  css file
<script>$(function() {
  $('body').attr('id','top-of-page');
});</script> 

Open in new window

0
 
Julian HansenCommented:
Not in the css file - the template (html) or functions.php.
There are plugins that allow you to add JS to posts
You can also look at this link https://codex.wordpress.org/Using_Javascript#JavaScript_in_Posts
1
 
nsitedesignsAuthor Commented:
I added your text to functions.php file and it took site down.  

This is text I got on home page:
Parse error: syntax error, unexpected '<' in /home/content/p3pnexwpnas10_data03/50/3215450/html/wp-content/themes/magazine-pro/functions.php on line 32

I have since removed the code from the functions.php page.  Maybe I didn't add it to the right spot on the functions page.  I don't know php so this was kind guessing where to put it.  See screenshot.
http://screencast.com/t/L5aMM669iW3Y
0
 
Julian HansenCommented:
Some assumptions here that need to be clarified - I mistakenly assumed you were familiar with how functions.php works.

Functions.php is where you load your hooks - you can enque_scripts there that get loaded in the page - you cannot just paste the <script> in there - apologies if I misread the situation.

Adding JS to a WordPress site requires a bit more knowledge of the actual site in question to be able to recommend how best to add the scripts.

How many pages will this functionality be needed on. If you give me a use case I can try and come up with a process you can follow to add it.
0
 
nsitedesignsAuthor Commented:
Sorry I wasn't clear and thank you for patience and understanding.  Will only need this for ONE page.

http://380.38e.myftpupload.com/services/

Thanks
0
 
Guy Hengel [angelIII / a3]Billing EngineerCommented:
No comment has been added to this question in more than 21 days, so it is now classified as abandoned.

I have recommended this question be closed as follows:

Not enough information to confirm an answer.

If you feel this question should be closed differently, post an objection and the moderators will review all objections and close it as they feel fit. If no one objects, this question will be closed automatically the way described above.

angelIII
Experts-Exchange Cleanup Volunteer
0
 
nsitedesignsAuthor Commented:
I was not able to figure out how to implement your suggestions but still want to give you points for your time.
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 8
  • 6
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now