-1

I use parallax to scroll down my page.

But now i need create a icon/arrow allways visible when the user click scroll down to the next page, like this example.

http://cyclemon.com/index.html

Thanks

I have a menu works fine,

<ul id="nav">
 <li><a href="#intro">HOME</a></li>
 </ul>

I add a arrow,

 <a href="#intro"><img src="imgs/icone_down.png" /></a>

The link works but dont add the scroll efect like parallax...

Allmost there

now i have,

    <script>
     $(document).ready(function (){
          $("#click").click(function (){
            //$(this).animate(function(){
$('html,body').animate({
scrollTop: window.scrollY + window.innerHeight
}, 1000);
            //});
        });
    });
</script>

<a href="#second"><img src="imgs/icone_down.png" /></a>

Ok fine, now i detect if we reached the bottom, but how can i hidde the arrow?

$(window).scroll(function() {   
if($(window).scrollTop() + $(window).height() == $(document).height()) {
   alert("bottom!");
}
});
Ricardo
  • 37
  • 1
  • 7

1 Answers1

1

Do what they did: add an element high in the DOM tree with:

.arrow {
    position: fixed;
    left: 50%;
    bottom: 15px;
    margin-left: -15px; // or whatever 50% the width of the arrow is
}

Then use JavaScript to scroll the page by X amount (say, window.innerHeight+"px") every time it is clicked. I would use jQuery to make the animation nice and smooth:

$('html,body').animate({
    scrollTop: window.scrollY + window.innerHeight
}, 1000);
Khior
  • 1,244
  • 1
  • 10
  • 20
  • ok and the link??? i add the arrow and it is visible but i cant add the link... to scroll to the next page – Ricardo Nov 29 '13 at 16:24
  • use jQuery .scrollTop() to scroll and trigger the link. – Philip G Nov 29 '13 at 16:36
  • If you use the animate block I posted in my answer, you should be able to smoothly transition down the page. – Khior Nov 29 '13 at 17:12
  • Khior now works fine thanks a lot... i just have a little question, if i have in the middle of the page one page that i dont whant have the arrow to scroll down, for example in the last page dont need have the arrow to scroll donw because dont have next page... how can i do it? – Ricardo Nov 29 '13 at 17:19
  • You can detect if you have reached the bottom of the page by detecting it in jQuery and then hiding the arrow if it is true (See: http://stackoverflow.com/questions/3898130/how-to-check-if-a-user-has-scrolled-to-the-bottom) – Khior Nov 29 '13 at 17:28
  • Khior i only have a little problem... if you scrool in the arrow in the penultimate and the last div you see a little space in the top, the div dont reaches up totally, you now why this happens? – Ricardo Nov 29 '13 at 18:11