CODEWITHSUNDEEP
jqueryhtmlcss
Ya Wang
Ya Wang

Reputation: 1808

Auto Scroll to Div Override

I have a list of links the href if each link is a div on the current page so that I can change the div display setting when clicked with some javascript. The current annoying issue is when you click on a link it scrolls to the div location. I don't want it to scroll to the div I just need to show it.

Links in list

<li><a href="#victimcenterdiv" class="side-a-li">THE CRIME
                        VICTIMS CENTER</a></li>
                <li><a href="#victimrightsdiv" class="side-a-li">CRIME
                        VICTIM LEGAL RIGHTS</a></li>

div and css

<div id="victimcenterdiv" class="ui-div-interface ui-show">
            <span>12345</span>
        </div>


.ui-div-interface {
    background: none;
    top: 10%;
    position: absolute;
    left: 9%;
    width: 100%;
    height: 100%;
    display: none;
}

.ui-show {
    display: block !important;
}

finally the javascript/jquery responsible:

<script>
    $(document).ready(function() {
        $('a').not($('#search-reg-options')).click(function() {
            $('.ui-show').removeClass('ui-show')
            var mydiv = $(this).attr('href');
            $(mydiv).addClass('ui-show');
        });

        $('#search-reg-options').click(function() {
            $('.options-shown').removeClass('options-shown')
            var mydiv = $(this).attr('href');
            $(mydiv).addClass('options-shown');
        });
    });
</script>

QUESTION How do I stop the auto scroll that happens when someone clicks the links that I have in my list?

Upvotes: 0

Views: 269

Answers (2)

Zsw
Zsw

Reputation: 4097

The reason your view automatically scrolls is because your a is anchored to the div with an id of victimcenterdiv, since you have the attribute href="#victimcenterdiv".

You can simply change the attribute to href="#". Alternatively, you can just remove the href attribute altogether in HTML5.

However, your jquery code currently depends on the href. So that means you will have to add a different attribute to help your code differentiate which div to make visible. One way you could do this is with the data-* attributes. This allows you to embed custom attributes with custom values to your a tag.

<a data-display="#victimcenterdiv" class="side-a-li">

To get the value of the data attribute in jquery, use the data() method.

var mydiv = $(this).data('display');
$(mydiv).addClass('ui-show');

Upvotes: 1

wrxsti
wrxsti

Reputation: 3504

I think what you are looking for is the e.preventDefault() method. This tells the event to stop whatever default behavior the element had, and continue with only the script you have following the .preventDefault().

$('a').not($('#search-reg-options')).click(function(e) {
    e.preventDefault();
    $('.ui-show').removeClass('ui-show')
    var mydiv = $(this).attr('href');
    $(mydiv).addClass('ui-show');
});

$('#search-reg-options').click(function(e) {
    e.preventDefault();
    $('.options-shown').removeClass('options-shown')
    var mydiv = $(this).attr('href');
    $(mydiv).addClass('options-shown');
});

Upvotes: 1

Related Questions