Плавный переход к якорю при скролле страницы
Здравствуйте. Никак не получается реализовать плавный переход к якорю при достижении определённой позиции на странице. Пробую реализовать через waypoint, но я не силён в js и поэтому не могу додуматься как это сделать. Помогите, пожалуйста.
<header> <br> <br> <br> <br> <br> </header> <section class="delivered" id="to-delivered"> <br> <br> <br> <br> <br> <br> <br> </section>
$('.delivered').waypoint(function () {
$('.delivered').(function(e){
$('html,body').stop().animate({ scrollTop: $('#to-delivered').offset().top }, 600);
e.preventDefault();
},{
offset: "70%"
});
|
Argeares,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
header{
background-color: hsla(120, 100%, 20%, 1);
height: 1500px;
}
.delivered{
background-color: hsla(0, 100%, 50%, 1);
text-align: center;
font-size: 48px;
}
p{
margin: 0;
background-color: hsla(120, 100%, 20%, 1);
height: 1500px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
<script>
$(function() {
$(".delivered").waypoint(function() {
$("html,body").stop().animate({
scrollTop: $("#to-delivered").offset().top
}, 600)
}, {
offset: "70%"
})
});
</script>
</head>
<body>
<header>
<br>
<br>
<br>
<br>
<br>
</header>
<section class="delivered" id="to-delivered">
<br>
<br>
<br>
<br>section
<br>
<br>
<br>
</section>
<p></p>
</body>
</html>
|
Да, то что нужно. Спасибо. Только такой вопрос ещё, а можно как нибудь сделать что бы и в верхний контент можно было попасть? Например что бы этот waypoint один раз только срабатывал
|
Argeares,
$(function() {
var waypoint = $(".delivered").waypoint(function() {
$("html,body").stop().animate({
scrollTop: $("#to-delivered").offset().top
}, 600);
waypoint[0].enabled = false
}, {
offset: "70%"
})
});
|
Так всё равно срабатывает постоянно(
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
header{
background-color: hsla(120, 100%, 20%, 1);
height: 1500px;
}
.delivered{
background-color: hsla(0, 100%, 50%, 1);
text-align: center;
font-size: 48px;
}
p{
margin: 0;
background-color: hsla(120, 100%, 20%, 1);
height: 1500px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
<script>
$(function() {
var waypoint = $(".delivered").waypoint(function() {
$("html,body").stop().animate({
scrollTop: $("#to-delivered").offset().top
}, 600);
waypoint[0].enabled = false ;
}, {
offset: "70%"
})
$('button.enable').on('click', function() {
waypoint[0].enabled = true;
})
});
</script>
</head>
<body>
<header>
<br>
<br>
<br>
<br>
<br>
</header>
<section class="delivered" id="to-delivered">
<br>
<br>
<br>
<br>section
<br>
<br>
<br>
</section>
<p><button class="enable">Enable </button></p>
</body>
</html>
|
atfdev.vacau.com
вот здесь, предпоследняя секция, код такой же вставил, а оно почему то срабатывает постоянно( в чем может быть дело? |
Спасибо вам огромное. Разобрался. Дело было в том что у меня JQuery второй ветки был, а нужно первой)
|
| Часовой пояс GMT +3, время: 13:28. |