Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.07.2017, 06:11
Интересующийся
Отправить личное сообщение для Argeares Посмотреть профиль Найти все сообщения от Argeares
 
Регистрация: 05.01.2017
Сообщений: 19

Плавный переход к якорю при скролле страницы
Здравствуйте. Никак не получается реализовать плавный переход к якорю при достижении определённой позиции на странице. Пробую реализовать через 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%"
		});
Ответить с цитированием
  #2 (permalink)  
Старый 09.07.2017, 06:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,812

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>
Ответить с цитированием
  #3 (permalink)  
Старый 09.07.2017, 06:42
Интересующийся
Отправить личное сообщение для Argeares Посмотреть профиль Найти все сообщения от Argeares
 
Регистрация: 05.01.2017
Сообщений: 19

Да, то что нужно. Спасибо. Только такой вопрос ещё, а можно как нибудь сделать что бы и в верхний контент можно было попасть? Например что бы этот waypoint один раз только срабатывал
Ответить с цитированием
  #4 (permalink)  
Старый 09.07.2017, 07:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,812

Argeares,
$(function() {
  var waypoint =  $(".delivered").waypoint(function() {
        $("html,body").stop().animate({
            scrollTop: $("#to-delivered").offset().top
        }, 600);
       waypoint[0].enabled = false
    }, {
        offset: "70%"


    })
});
Ответить с цитированием
  #5 (permalink)  
Старый 09.07.2017, 07:21
Интересующийся
Отправить личное сообщение для Argeares Посмотреть профиль Найти все сообщения от Argeares
 
Регистрация: 05.01.2017
Сообщений: 19

Так всё равно срабатывает постоянно(
Ответить с цитированием
  #6 (permalink)  
Старый 09.07.2017, 07:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,812

Сообщение от 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() {
  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>
Ответить с цитированием
  #7 (permalink)  
Старый 09.07.2017, 07:40
Интересующийся
Отправить личное сообщение для Argeares Посмотреть профиль Найти все сообщения от Argeares
 
Регистрация: 05.01.2017
Сообщений: 19

atfdev.vacau.com
вот здесь, предпоследняя секция, код такой же вставил, а оно почему то срабатывает постоянно(
в чем может быть дело?
Ответить с цитированием
  #8 (permalink)  
Старый 09.07.2017, 07:59
Интересующийся
Отправить личное сообщение для Argeares Посмотреть профиль Найти все сообщения от Argeares
 
Регистрация: 05.01.2017
Сообщений: 19

Спасибо вам огромное. Разобрался. Дело было в том что у меня JQuery второй ветки был, а нужно первой)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Заменить class в div при скролле страницы EvilDoom Общие вопросы Javascript 3 10.10.2014 14:56
Как компилировать sass в css при перезагрузки страницы? Armen (X)HTML/CSS 0 21.09.2014 15:21
Переход к якорю diakon Events/DOM/Window 5 22.07.2014 22:34
Как сделать чтобы элемент появлялся при скроле страницы, у определенного класса. SnakeAce Общие вопросы Javascript 1 30.01.2013 12:32
Выезжающие\уезжающие div при загрузке страницы goodkot Элементы интерфейса 1 28.09.2012 07:58