CODEWITHSUNDEEP
javascripthtmljquerycssjquery-events
zeekrey
zeekrey

Reputation: 451

Show div while scrolling and change behavior

I've already seen this sometimes, but I don't know how to realize it or how to search for it. That's why I would like to explain what it does:

Let's say we got an image, an arrow and it points downwards and when you click on it, the page scrolls down. When I now scroll down and reach a specified point the arrow points upwards and brings me back to the top of the page.

EDIT: I found an example. See the small arrow at the bottom and how it changes if you reach the end of the page. rorymcilroy.com

Upvotes: 0

Views: 648

Answers (3)

r3bel
r3bel

Reputation: 1370

you could use the jQuery ScrollTo Plugin

here is a demo

here is a jsfiddle demo for what you want (using the scrollTo plugin)

jsfiddle demo

the javascript:

$('#upDownArrow').click(function() {
    if($(this).hasClass("arrowUp")) {
        $.scrollTo( '#top', 500); // scroll to top      
        $(this).removeClass("arrowUp");
        $(this).addClass("arrowDown");
    } else {
        $.scrollTo( '#bottom', 500); // scroll to bottom
        $(this).removeClass("arrowDown");
        $(this).addClass("arrowUp");     
    }
});

the html:

<div id="#top"></div>
<div id="upDownArrow" class="arrowDown"><div class="arrow"></div></div>

<!-- add your content here -->

<div id="#bottom"></div>

the css:

#upDownArrow {
    position: fixed;
    top: 50px;
    right: 50px;
    width: 30px;
    height: 30px;
    background: #33B;
}
#upDownArrow:hover {
    background: #99F;
    cursor: pointer;
}

#upDownArrow.arrowDown:hover .arrow {
    border-top-color: #99F;   
}

#upDownArrow.arrowUp:hover .arrow {
    border-bottom-color: #99F;   
}

#upDownArrow.arrowUp .arrow {
    position: absolute;
    border: 15px solid transparent;
    border-bottom: 15px solid #33B;
    top: -30px;
}

#upDownArrow.arrowDown .arrow {
    position: absolute;
    border: 15px solid transparent;
    border-top: 15px solid #33B;
    bottom: -30px;
}

if you want a previous / next button, you might have to create a list of items / id's / positions (look at the documentation of the scrollTo plugin to see what parameters you can use) that should get stepped through like that:

var steps = ["top","part1","part2","bottom"];

and then create 2 buttons, one for up, one for down and then use:

var currentPosition = 0;

$("#buttonUp").click(function() {
    if(currentPosition == 0) {
        currentPosition = steps.length-1;
    } else {
        currentPosition--;
    }
    $.scrollTo('#'+steps[currentPosition],500);        
});

$("#buttonDown").click(function() {
    if(currentPosition == steps.length-1) {
        currentPosition = 0;
    } else {
        currentPosition++;
    }
    $.scrollTo('#'+steps[currentPosition],500);        
});

here is a demo with up and down button:

jsfiddle demo with up and down

jsfiddle demo up and down fullscreen

here another demo with your "button-changes" on scroll ;)

jsfiddle button changes demo

Upvotes: 1

aziz punjani
aziz punjani

Reputation: 25776

I wrote this a while back. I think it's what you are looking for. 

$('a').on('click', function (event) {
    event.preventDefault();//stop the browser from jumping to the anchor
    var href  = $(this).attr('href'),  // get id of target div from link e.g #one #two 
        oset  = $(href).offset().top;   // get the offset top of the div
    $('html, body').stop().animate({
        scrollTop : oset  // animate the scrollTop property to the offset of target div
    }, 1000, function () {   
        location.hash = href; // change the hash to target div  
    });
});

Upvotes: 0

Ivan P
Ivan P

Reputation: 1927

If I understand you correctly, the this question is the same as yours.

Upvotes: 0

Related Questions