?
Solved

Jump links not quite lining up

Posted on 2016-09-06
18
Medium Priority
?
112 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 6
  • 2
  • +2
18 Comments
 
LVL 84

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 84

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
WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

 
LVL 111

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 58

Accepted Solution

by:
Julian Hansen earned 2000 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 58

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 58

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
 

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 58

Assisted Solution

by:Julian Hansen
Julian Hansen earned 2000 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 58

Assisted Solution

by:Julian Hansen
Julian Hansen earned 2000 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 58

Assisted Solution

by:Julian Hansen
Julian Hansen earned 2000 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 143

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
This article discusses how to implement server side field validation and display customized error messages to the client.
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

764 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