CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jason Elliott
Jason Elliott

Reputation: 3

Anchor tag drops to the bottom of the page

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

Upvotes: 0

Views: 433

Answers (2)

Vixed
Vixed

Reputation: 3509

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();
});

Upvotes: 0

isherwood
isherwood

Reputation: 61073

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?

Upvotes: 1

Related Questions