Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Dave Six
Dave Six
8,366 Points
Posted by Dave Six
Dave Six
8,366 Points

jQuery resets scroll position to top on click / class change

Hey guyz,

I'm trying to build a Menu beside some boxes which you can click on to see more information about it. The thing is, if the page shows up the content of the information which generates underneath the clickable boxes (and it stacks itself underneath each other again if you click more than one box) then you're able to scroll a bit more.

Since I've got a menu which slides out of the left when you click on a SVG it always scrolls up to the top of the page. This is not very ideal since I've got to scroll down again to see where I was if I want to go on reading.

I hope you can help me out guyz!

Here's the markup:

    <span class="menu">
        <article class="svg">
            <?xml version="1.0" encoding="utf-8"?>
            <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
            <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
            <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 283.46 283.46" enable-background="new 0 0 283.46 283.46" xml:space="preserve">
<rect x="4.225" y="200.506" width="273.315" height="40"/>
<rect x="4.135" y="118.258" width="273.315" height="40"/>
<rect x="4.135" y="37.921" width="273.315" height="40"/>
</svg>
        </article>
    </span>
<aside id="menu">
        <p class="opt first"><a class="tb one" href="#">option_1</a></p>

        <p class="opt second"><a class="tb two" href="#">option_2</a></p>

        <p class="opt third"><a class="tb three" href="#">option_3</a></p>

        <p class="opt fourth"><a class="tb four" href="#">option_4</a></p>
    </aside>
    <section id="wrapper">
        <h1 class="head">Projekt Überschrift</h1>
        <article class="box one">
            <img src="img/31d5f8f94823cbc1.jpg"/>
            <article class="overlay one">
                <h1>Random shit 1</h1>

                <p class="descr">Bilddatei</p>
            </article>
        </article>
        <article class="box two">
            <img src="img/awesum.jpg"/>
            <article class="overlay two">
                <h1>Random shit 2</h1>

                <p class="descr">Audiodatei</p>
            </article>
        </article>
        <article class="box three">
            <img src="img/ooV2v.jpg"/>
            <article class="overlay three">
                <h1>Random shit 3</h1>

                <p class="descr">Container</p>
            </article>
        </article>
        <article class="box four">
            <img src="img/G7qNhH9.jpg"/>
            <article class="overlay four">
                <h1>Random shit 4</h1>

                <p class="descr">Sonstiges</p>
            </article>
        </article>
        <article class="info one">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
                rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
                dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
                magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
                clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </article>

the content section just repeat itself depending on the class.

and the JS so far

var currentPosition = $(document).scrollTop();

function menu() {
    $('#container .menu').click(function () {
        $('#menu, .svg').toggleClass('active');
        $(window).scrollTop(currentPosition);
    });
}

function menuItems() {
    $('.tb').click(function () {
        $(this).toggleClass('active');
    });
}

function boxItems() {
    $('.box').click(function() {
        var classes = $(this).attr('class').split(/\s/);
        $(this).toggleClass('clicked');
        $('.info.' + classes [1]).toggleClass('clicked');
    });
}

Dave

2 Answers

miguelcastro2
miguelcastro2
Courses Plus Student 6,573 Points

Since your links contain anchors, "#", when you click on the links it will move the page back to the top. Try replacing the href with something like:

href="javascript:void(0)"

This will prevent anything within the href from executing.

Dave Six
Dave Six
8,366 Points
Dave Six
Dave Six
8,366 Points

Hey Miguel,

thanks a lot for your reply, that works like charm!

Dave