Link to home
Start Free TrialLog in
Avatar of nsitedesigns
nsitedesignsFlag for United States of America

asked on

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
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

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'.
Avatar of nsitedesigns

ASKER

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...
I don't know what is in header.php so I can't tell you.  If it is the 'top content', that might work.
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

ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
How do I modify the body tag on a wordpress site?
Did you try the script above?
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.
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.
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>
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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

SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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
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
I was not able to figure out how to implement your suggestions but still want to give you points for your time.