When I click a link the page jumps to top - how can I stop that?

Question

How can I stop the page from jumping to top after clicking a link? I am running the following scripts. (I have a hunch that they are causing this behaviour)

<script type="text/javascript">
    $(document).ready(function() {

        $("#menu-primary-menu-1").append('<li class="menu-logo menu-item"><a href="<?php echo site_url(); ?>"><img src="<?php echo site_url(); ?>/wp-content/themes/redu/images/redu4.png"></a></li>');
    });
</script>
    
<script type="text/javascript">
    $(window).scroll(function() {
        if ($(this).scrollTop() < 50) {
            $('#menu-primary-menu-1').hide();
        } else $('#menu-primary-menu-1').show();
    });
</script>
    
<script type="text/javascript">
    $(window).scroll(function() {
        if ($(this).scrollTop() > 340) {
            $('.arrow').css({
                'display': 'none'
            });
        } else $('.arrow').show();
    });
</script>
    
<script type="text/javascript">
    $(".arrow").click(function() {
        $('html,body').animate({
            scrollTop: $(".row").offset().top
        }, 'slow');
    });
</script>

I tried this as a fix:

<script language="JavaScript" type="text/javascript">
    var link = document.getElementsByTagName("a");

    $(link).attr('onclick', 'bgenScroll();');

    <!--
    function bgenScroll() {
        if (window.pageYOffset != null) {
            st = window.pageYOffset + '';
        }
        if (document.body.scrollWidth != null) {
            if (document.body.scrollTop) {
                st = document.body.scrollTop;
            }
            st = document.documentElement.scrollTop;
        }
        setTimeout('window.scroll(0,st)', 10);
    }

    $('a').click(function(e) {
        e.stopPropagation();
    });

    //-->
</script>

I am running them in a wordpress theme.

Fixed

This was not about # anchors. All the links scrolled the page to top when clicked.

I used this as a fix.

assuming all of your links have a class of `arrow`, you are telling it on click, animate scrolltop. you really need to know what code you are copying/pasting into your projects. — ethorn10, Jun 03 '15 at 13:47
possible duplicate of [Avoid window jump to top when clicking #-links](http://stackoverflow.com/questions/8240554/avoid-window-jump-to-top-when-clicking-links) — Seth McClaine, Jun 03 '15 at 13:49

Zee · Answer 1 · 2015-06-03T13:58:02.840

1

I think you have href="#" in your anchor. You can use #~ and try.

<a href="#~">YourLink</a> <!--Or any other character to avoid the scroll up-->

edited Jun 03 '15 at 13:58

answered Jun 03 '15 at 13:49

Zee

8,420
5
36
58

This will refresh page. You should remove this answer – Onimusha Jun 03 '15 at 13:50
@isherwood It may not be standard practice but its **VALID**. – Zee Jun 03 '15 at 14:08
`` will also jump to top as it's an anchor so once again the advice is incorrect – Onimusha Jun 03 '15 at 14:16

score 0 · Answer 2 · answered Jun 03 '15 at 13:50

0

Or you can change your existing code with following code

$(link).attr('onclick', 'return bgenScroll();');
function bgenScroll(){
    //  your logic
    return false; // add this at end of the function;
}

answered Jun 03 '15 at 13:50

Mitul

3,431
2
22
35

score -1 · Answer 3 · answered Jun 03 '15 at 13:46

-1

Try this code

$("a").click(function(){
    return false;
})

answered Jun 03 '15 at 13:46

Mitul

3,431
2
22
35

4

Bad advice. This will disable ALL hyperlinks on the page – Onimusha Jun 03 '15 at 13:48
Or: `function(event) { event.preventDefault(); }` - perhaps worth including for completeness sake? – bardzusny Jun 03 '15 at 13:48
@Onimusha but if you check the code for the use posted he want to disable the link `$('a').click(function(e) { e.stopPropagation(); });` – Mitul Jun 04 '15 at 06:46
@Mitul Hello Mitul. Regardless of what he's trying, it's bad practice which is what should be corrected and advised against. That's all my point was :) – Onimusha Jun 04 '15 at 06:51
@Onimusha Ok no problem i have just do code for the prevent the default click event. Thanks i will make sure next time to provide good quality answer. – Mitul Jun 04 '15 at 06:54

When I click a link the page jumps to top - how can I stop that?

Fixed

3 Answers3