Solved

Jump links not quite lining up

Posted on 2016-09-06
18
50 Views
Last Modified: 2016-10-25
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
Comment
Question by:nsitedesigns
  • 8
  • 6
  • 2
  • +2
18 Comments
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 41786902
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
 

Author Comment

by:nsitedesigns
ID: 41786955
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
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 41786980
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
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 41787019
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
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41787258
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
 

Author Comment

by:nsitedesigns
ID: 41789835
How do I modify the body tag on a wordpress site?
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41789977
Did you try the script above?
0
 

Author Comment

by:nsitedesigns
ID: 41794397
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41794542
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

Author Comment

by:nsitedesigns
ID: 41794761
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
 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
ID: 41794878
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
 

Author Comment

by:nsitedesigns
ID: 41809057
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
 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
ID: 41809246
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
 

Author Comment

by:nsitedesigns
ID: 41809351
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
 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
ID: 41809403
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
 

Author Comment

by:nsitedesigns
ID: 41809434
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
 
LVL 142

Expert Comment

by:Guy Hengel [angelIII / a3]
ID: 41856691
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
 

Author Closing Comment

by:nsitedesigns
ID: 41858525
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 improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now