Anchor tag drops to the bottom of the page

Question

I am having a problem with my anchor tag from a separate page to the designated page, loading then bumping to the bottom of the page. Is there a fix for this? See link for complete code.

jQuery

 <script>
 jQuery(document).ready(function() {

  var allPanels = jQuery('.accordion > dd').hide();

  jQuery('.accordion > dt > a').click(function( e ) {
  e.preventDefault(); // don't use return false;
  allPanels.slideUp('normal');
  jQuery(this).parent().next().slideDown('normal');
  });

  jQuery(location.hash).show();

});
</script>

http://jsbin.com/cugagoruni/edit?html,css,js,output

http://demo.xhalocigsx.com/points/#reviewpoints

Does the JSbin example demonstrate the problem? I don't see it. — isherwood, Dec 04 '15 at 15:10
@isherwood I can provide a link http://demo.xhalocigsx.com/points/#reviewpoints — Jason Elliott, Dec 04 '15 at 15:12
Named anchors are a somewhat defunct technique and can cause location problems. Try using ID values on the anchor (or a parent element) instead. — isherwood, Dec 04 '15 at 15:15
It scrolls correctly in Pale Moon, but your menu gets over it. You will have to use some js code to scroll to correct position. — user5542121, Dec 04 '15 at 15:17
I tried changing the position of the anchor and it still hit the bottom. — Jason Elliott, Dec 04 '15 at 15:19
Is there a way to control where the anchor hits? like centering the item being anchored in the browser? — Jason Elliott, Dec 04 '15 at 15:21
Sure, but that's beyond the scope of this question. It involves `offset()`. — isherwood, Dec 04 '15 at 15:24
Would you mind showing me where I would place offset? Or would I have to add another section to the script? — Jason Elliott, Dec 04 '15 at 15:35
There are other libraries being used and controlled. The live version of this site is a very complex magento build. — Jason Elliott, Dec 04 '15 at 15:36

score 1 · Answer 1 · edited May 23 '17 at 12:30

Assuming the target page is yours, try changing this

<dt>
    <a name="#reviewpoints">Writing Product Reviews</a>...
</dt>

to this

<dt id="reviewpoints">
    <a href="#">Writing Product Reviews</a>...
</dt>

Named anchors are known to cause position problems, and in HTML5 there is no name attribute for anchors anyway. Also, the href attribute is required.

More info

In addition, you seem to have jQuery issues on the page:

Uncaught TypeError: $(...).ready is not a function

This usually means that either jQuery isn't available or you have an alias conflict with another library.

Update: You appear to be loading at least 3 versions of jQuery in that page. Are they being handled properly?

Okay I see what you mean, there is an issue with that. The
doesnt open when I land on the page anymore with that line of code changed. — Jason Elliott, Dec 04 '15 at 15:26

Vixed · Answer 2 · 2015-12-04T15:33:22.803

0

Just try using slideToggle:

$(function() {
    var allPanels = $('.accordion>dd');
    allPanels.hide();
    $('.accordion>dt>a').on('click',function(e) {
        e.preventDefault();
        el=$(this).parent().next();
        allPanels.not(el).slideUp();
        el.slideToggle();
    });
    $(location.hash).show();
});

edited Dec 04 '15 at 15:33

answered Dec 04 '15 at 15:19

Vixed

3,429
5
37
68

The anchored accordion tab is supposed to open up as well with the script im using. – Jason Elliott Dec 04 '15 at 15:47
It will, but you must fix your elements ID. I saw two id reviewpoints on your page. fix it and than you can use $(location.hash).show(); or $(location.hash).click(); in the code I posted, dipends of what you want to use, if the DIV or the A element – Vixed Dec 04 '15 at 15:57
You posted my code in a meta tag??? Ok, please, place it in a script tag at the bottom of your page, just before the
tag. :/
– Vixed Dec 04 '15 at 16:09
I added your script. and removed the ID's. I added an A name=reviewpoints – Jason Elliott Dec 04 '15 at 16:11
its in a script tag on the actual static block(page) – Jason Elliott Dec 04 '15 at 16:12
Now it just needs a small adjustment.... like an offset to the top about 200 pixels – Jason Elliott Dec 04 '15 at 16:13
no, it's not I'm looking at your code through the console... and you have` – Vixed Dec 04 '15 at 16:15
Jason please, trust me, you must delete the code I've done, put it between a `` and place it on your page. – Vixed Dec 04 '15 at 16:25

Anchor tag drops to the bottom of the page

2 Answers2