[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Jump links not quite lining up

Posted on 2016-09-06
18
Medium Priority
?
114 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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 59

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 59

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 59

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 59

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 59

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 59

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

Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
There are times when I have encountered the need to decompress a response from a PHP request. This is how it's done, but you must have control of the request and you can set the Accept-Encoding header.
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 purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
Suggested Courses

650 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