2013-11-29 4 views
-1

Я использую параллакс для прокрутки вниз по моей странице.Параллакс со стрелкой прокрутки вниз

Но теперь мне нужно создать иконку/стрелку, всегда видимую, когда пользователь нажимает прокрутку вниз до следующей страницы, как этот пример.

http://cyclemon.com/index.html

Благодаря

У меня есть меню отлично работает,

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

добавить стрелку,

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

ссылка работает но не добавить эфект прокрутки, как параллакс ...

Allmost там

теперь у меня есть,

<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> 

Хорошо прекрасный, теперь я обнаружить, если мы достигли дна, но как я могу Hidde стрелка?

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

ответ

1

Делайте то, что они сделали: добавить элемент высоко в дереве DOM с:

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

Затем прокрутите страницу по количеству X использовать JavaScript (скажем, window.innerHeight + "ПВ") каждый время кликается. Я бы использовал jQuery, чтобы сделать анимацию приятной и гладкой:

$('html,body').animate({ 
    scrollTop: window.scrollY + window.innerHeight 
}, 1000); 
+0

ОК и ссылка ??? Я добавляю стрелку, и она видна, но я не могу добавить ссылку ..., чтобы перейти к следующей странице: – Ricardo

+0

используйте jQuery .scrollTop(), чтобы прокручивать и запускать ссылку. –

+0

Хорошо, теперь я перехожу во второй div, но не имею эффекта сглаживания ... – Ricardo

Смежные вопросы