We Keep Coding

HTML - Anchor Links Smooth Scrolling not scrolling to correct section

Good Morning/Afternoon/Evening,
I have a webpage which contains some anchor links in a nav section. Each anchor link is meant to go to a certain section of the page. They are set out in the same general format as this:
Section 1
Section 2
Section 3
<!-- Further down the page... -->
<p id="section1"></p>
<p id="section2"></p>
<p id="section3"></p>
Most of the links work as expected but there is one link that is formatted just the same as the others but the link goes to the wrong section of the page. Does anybody have any ideas about why this could be happening?
Here is the relevant code:
<div style="z-index: 1000; line-height: 32px;" class="dots">
....
<p id="d3text" class="lineText" style="display: inline;">Translation</p><i class="dot fas fa-circle"></i>
....
</div>
<p id="translation"></p>

If that section has the css position defined to absolute or there is a div before it that has position absolute or fixed this may be your problem because javascript doesn't take in consideration the height of these elements
Or if you have a float that is not cleared this also may be the problem

HTML pop up on click within WordPress

In the WordPress theme I am using there is an area for HTML banner code. At the moment it contains the following:
<a href="http://bathcitysound.com/streaming/player.html">
<img src="my-image-code-goes-here" /></a>
All is well and good, and it functions as it should and when clicked it goes to the specific page. However, what I actually want to happen is when the image is clicked, it opens a pop up window of 300 pixels wide and 600 pixels height with this as the address:
http://bathcitysound.com/streaming/player.html
What should I add to the existing code to make that work?

This should work:
<a href="javascript:window.open('http://bathcitysound.com/streaming/player.html','yourWindowTitle','width=300,height=600')">
<img src="my-image-code-goes-here" />
</a>
You can try in your browser, by going to this URL:
javascript:window.open('http://bathcitysound.com/streaming/player.html','yourWindowTitle','width=300,height=600')

Clicking to an anchor from and image map causing page to move unnecessarily

I realize I'm still pretty new here, but I have a static image (Google Map but not using Google API yet) in which I have created hotspots which will pull up location data that lives in a table to the left of the map. When a hotspot is clicked on, however, the page scrolls down so that the top of the map (the image map) is at the top of the screen even though the information is directly beside the map.
I am assuming this is because the anchor is seeking to load at the top of the screen. This would be okay except that my header is now pushed out of the screen. Is there a way for the page to not "move" when the hotspot is clicked?
The page can be seen here: http://www.mydillonsupply.com/default.aspx?page=customer&file=customer/disupp/customerpages/locations_page.htm

Instead of using the default browser behavior (for anchor tags) just block it, and scroll the box yourself. I can see you are already using jQuery. So something like this ought to do the trick.
$('area').bind('click', function(e) {
e.preventDefault();
// the div in question has nothing uniquely identifiable as it is now,
// assign it a unqie class or id so you can select it
var findAnchor=this.href.split('#')[1];
$('#the_div').scrollTop($('a[name="' + findAnchor+'"]').next().position().top);
});
It's kinda hard to test in the context of that page, but if you set up a fiddle with just that part of it I am sure this could be made to work right pretty easily.
(edit) - OP set up a fiddle with the problem, updated version here:
http://jsfiddle.net/H3Mz6/9/
The code above has been updated to reflect what actually works. I also added the id "the_div" to the div surrounding the table of locations. Here's how it works:
1) get the part of the href after the # - the browser may add the full url.
2) find it, then get the next() element, because the invisible anchor tags will report that they have no location information
3) then get the position().top value which is the postion of that element relative to it's container
4) then scrollTop(..) to it
Contrary to #colinross's suggestion, there's nothing that's either non-extensible nor inflexible about imagemaps. Quite the opposite, they are the only way you can have irregularly shaped hotspots without going to a heck of a lot of trouble, and that gives you a lot of power. All you need to do to make them do whatever you want is bind your own mouseover and/or click events to the areas, and call e.preventDefault(). It's all yours from there.
Yes, I like image maps, and I also wrote a plugin that does a heck of a lot with them. So I am fairly biased. But I am surprised by the trouble people go to in order to avoid them (like absolutely positioning anchor links, complex css, and so on) when they're dead simple, easy to use, work with every browser under the sun, and are far more powerful than positioning all your hotspots by hand. (And without an imagemap, or some crazy logic to figure out where the mouse is on your own, you're limited to rectangular areas anyway!).

The jump is happening because you are using an image map that is processing a click to the location #DillonLocationsMap.
It is the same result as having an in-page anchor like <a name="over_here" /> and a link elsewhere of Go over here.
I would suggest you don't use an image map to be honest and they are not very extensible nor configurable.
give the fish answer
Move the actual <map> element up, to for instance before the table#MainTable element. It will still technically jump, but your header should still be in view.
p.s. Tables for page-layout makes pandas cry ;(

When you click on the link, your <a name="Nashville"></a> tag relating to said city end up scrolling to the top of your <!-- table containing locations -->.
Subsequently, this will work the exact same way as with a "Top" link where you place an <a name="TOP"></a> at the top of your page and then a Back to top at the bottom of your page. It will try to put the <a name="Nashville"> as close to the top of the viewport as possible (example: http://mix26.com/demo/local_scroll/index.html).
You could try something like this (found here):
<html>
<head>
<title>Document Title</title>
<script type="text/javascript" language="javaScript">
<!--
function go_anchor(n){
document.getElementById("div1").scrollTop = document.getElementById(n).offsetTop
}
// -->
</script>
</head>
<body>
To anchor 1<br />
To anchor 2<br />
To anchor 3<br />
To anchor 4<br />
<div id="div1" style="position:absolute; left:30; top:100; width:330; height:200; clip:rect(0,330,200,0); overflow:auto; padding:5;border:2px solid black">
<p>To anchor 1</p>
<p>Dummy Text 2</p>
<p>Dummy Text 3</p>
<p>Dummy Text 4</p>
<p>Dummy Text 5</p>
<p>Dummy Text 6</p>
<p>Dummy Text 7</p>
<p><span id="sp1">Anchor 1</span></p>
<p>Dummy Text 9</p>
<p>Dummy Text 10</p>
<p>Dummy Text 11</p>
<p>Dummy Text 12</p>
<br/><br/><br/><br/><br/>
<span id="sp2">Anchor 2</span>
<br/><br/><br/><br/><br/>
<span id="sp3">Anchor 3</span>
<br/><br/><br/><br/><br/>
<span id="sp4">Anchor 4</span>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
The End
</div>
</body>
</html>

In an HTML page I need to anchor to a tag on mouseover

<a href="#anchor1">
<img src="http://www.test.com/images/test/test.png" width="80" height="150" />
</a>
<div id="anchor1">...</div>
When I mouse over test.png I need it to scroll the page to #anchor1 ..help_me

Use Javascript inside the onmouseover event:
<img onmouseover="window.location.hash = 'anchor1'" />
Note that you don't use the '#' character.
Also, you are not naming the anchor correctly. It should be:
<a name="anchor1" .... instead of href.

I'm not sure you're using "anchor" in the generally accepted sense.
the tag is a "anchor" tag that is used to wrap around an image or text link, or now virtually any DOM object it consists of either a href tag, which is it's target, or a name tag in which case it IS a target. so a page with
<a id="part1"/><h3>part 1</h3></a>
and
<img src="..." onMouseover="$.scrollTo('#part1');">
clicking on the image would make the page scroll so that the h3 containing "part1" would be at the top of the page.
to do it with jQuery and mouseOver you'll need to use jQuery scrollTo() then you can define your speed and easing.

How do I stop a link from changing the position on the page (maintain scroll back position)

I have an href tag with an image nested inside it and I want to be able stop the page jumping back to the top after it is clicked.
NOTE:
the href does not post back it fires a jQuery event on the page.
<a href="#" onclick="javascript:SendPlaylist()" style="border:none;" class="addButton" ><img style="border:none;" src="/Images/icons/icon_add.gif"/></a>
Okay any help much appreciated.
Cheers,
Pete

This should work:
$(".addButton").click(function(event) {
// Do your stuff here
event.preventDefault();
});
Hope this helps !

Why not just remove the anchor and add the onclick event to the image
like this:
<img style="border:none;cursor:pointer;" src="/Images/icons/icon_add.gif" onclick="javascript:SendPlaylist()"/>

the logical solution here would be:
<a href="#" onclick="SendPlaylist(); return false;" style="border:none;" class="addButton" ><img style="border:none;" src="/Images/icons/icon_add" onclick="javascript:SendPlaylist()"/></a>
you don't use the "javascript" keyword when using onclick... you can use it in the HREF itself, which would produce:
<a href="javascript:SendPlaylist(); return false;">
... and then you can remove the onclick part completely.
I also don't see a reason for another onclick for that img tag though - it can be removed altogether, since it would probably duplicate the call from that link
also, since you're saying that the link does not post back but uses a jQuery event, perhaps adding a "return false" to that event would work just as well as returning false in the onclick

The href="#" causes it to jump to the top, so logically speaking, in order to prevent that type of behavior, you should replace the 'a' tag with a span or something similar. The onclick should still work and unless SendPlaylist jumps to the top, it shouldn't change your scroll position.

Jumping between links on a page using anchors and more or less staying with the link in question see anyword2
<html>
<body>
top
Jump to anylink
<a name="anylink">TEXT</a>
<p> Top
Jump to anylink2
<br><br><br><br><br>
<br><br><br><br><br>
<p> bottom
Jump to Bottom
<br><br><br><br><br><br><br><br>
Stay at link2
<a name="anylink2">anylink 2 </a>
Jump to Bottom
<br><br><br><br><br<br><br<br><br
<br><br><br><br><br<br><br<br><br<br<br><br
<a name="bottom">You're at the bottom!</A>
Jump to top
</body>
</html>

The reason why the browser moves to the top, is that it attempts to find the anchor named "#".
You can remove the link tag altogether. Any element's onclick handler should be sufficient for your needs.