jQuery прокрутка до div не будет прокручиваться, только прыгать

Я знаю, что этот вопрос задан раньше, но я не могу заставить его работать, независимо от того, сколько ссылок и демонстраций я пробовал в ответах.jQuery прокрутка до div не будет прокручиваться, только прыгать

Пожалуйста, обратите внимание:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <!-- Required meta tags --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <!-- Bootstrap CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
    <link rel="stylesheet" href="css/custom.css"> 
    </head> 
    <body> 

<div class="jumbotron jumbotron-fluid"> 
    <div class="container container-fluid hiimorsi"> 

<a href="#about"><img src="img/arrow-211-64.png" class=" d-block img-fluid"></a> 
</div> 
</div> 

<script src="app.js" type="text/javascript"></script> 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 

    </body>

Мой JQuery фрагмент (текущий)

$(document).ready(function() { 
    $("#arrow").on("click", function (e) { 
     document.querySelector('.hello').scrollIntoView({ 
      behavior: 'smooth' 
     }); 
    }); 
});

Как вы можете видеть, я использую загрузчик (в первый раз), интересно, возможно ли это возиться с кодом?

Большое спасибо заранее.

источник

2017-01-26 Orsi

Почему вы включаете jQuery дважды? – Andreas

Это ваш полный html? Не удается увидеть элемент '.hello'. –

Почему вы используете 'document.querySelector ('. Hello')' вместо селектора jQuery? – Jaumzera

Это потому, что вы положили # в качестве своего значения href.

<a href="#about"> 
<img src="img/arrow-211-64.png" class=" d-block img-fluid"> 
</a>

Что произойдет, он будет прыгать в верхнюю часть браузера при нажатии.

Изменить что:

<a> 
    <img src="img/arrow-211-64.png" class=" d-block img-fluid"> 
</a>

источник

2017-01-26 20:23:11

#about ссылается на div с идентификатором «about» - я ошибаюсь, чтобы использовать это? – Orsi

@Orsi Ну, в вашем случае, так как вы хотите иметь гладкую прокрутку, тогда неправильно использовать '# about'. Если вы нажмете на элемент с href '# about', он сразу же перейдет к этому элементу. –

почему бы не использовать эффект JQuery анимации.

<script type="text/javascript"> 
     (function(){ 
      $("#arrow").on("click", function (e) { 
       let scrollToPos = document.querySelector('.hello').offsetTop; 
       $('body').animate({scrollTop: scrollToPos },500,'linear'); 

      }); 
     })(); 
    </script>

не уверен, но считают, что scrollIntoView родной эффект не имеет каких-либо анимации/ослабления на нем, но это работа, чтобы изначально перейти к этому пункту. Butdont цитирую меня по этому поводу :-)

источник

2017-01-26 20:29:51

Я только что попробовал это, и он все еще не работает - он переходит в конкретный раздел, а не медленно прокручивается до него. Можете ли вы взглянуть на него в скрипаче? https://jsfiddle.net/7cnpbr83/ спасибо заранее. – Orsi

вам может понадобиться также jquery easing? но будет быстро выглядеть :-) –

nothign, чтобы щелкнуть там, и если я нажму смешную ссылку, я получу модальное всплывающее окно, чтобы прокрутить ??? –

jQuery прокрутка до div не будет прокручиваться, только прыгать

ответ

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