У меня возникают некоторые проблемы с попыткой реализовать эту функцию в проекте, над которым я работаю. В основном цель заключается в том, что пользователь нажимает кнопку "Начать", она будет непосредственно прокручивать указанный элемент. Единственная проблема заключается в том, что он не работает на хром или сафари, что очень странно, и иногда веб-сайт имеет тенденцию мерцать случайным образом, когда я нажимаю на него
Вот веб-сайт, над которым я работаю
digitalspin.ph/create/index.html
HTML
<section class="get_started">
<div class="container_12">
<div class="grid_12 relative">
<h2 id="gs_button"><a href="#company_info"><span>Get<br/> Started</span></a></h2>
</div>
</div>
</section>
<div class="content">
<div id="company_info" class="container_12">
<h2 class="creative_spin_small">Creative Spin</h2>
<div class="liquid-slider" id="main-slider">
<div class="slide1">
<h2 class="title">Who We Are</h2>
<div class="custom_column">
<div class="message">
<h3>turning</h3>
<h4>your</h4>
<h5>imagination</h5>
<h6>into <span>reality</span></h6>
</div>
</div>
<div class="custom_column">
grid 6
</div>
</div>
<div>
<h2 class="title">What We Can Do</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
</div>
</div>
<div class="social">
<ul>
<li><a href="#" target="_blank" alt="Facebook">Facebook</a></li>
<li id="social_twitter"><a href="#" target="_blank" alt="Twitter">Twitter</a></li>
</ul>
</div>
</div>
JAVASCRIPT
<script>
$(document).ready(function(){
$("#gs_button").click(function() {
$('html, body').animate({
scrollTop: ($("#company_info").first().offset().top)
}, 1200);
});
})
</script>
Ошибка заключается в способности webkit анимировать тело. Вместо этого создайте div только внутри тела и примените анимацию к этому вместо этого...
<body>
<div class="wrapper">
<nav>
<a class="scroll-to-id" href="#" data-target="section1">Section 1</a>
<a class="scroll-to-id" href="#" data-target="section2">Section 2</a>
</nav>
<section>
<a id="section1"> </a>
<p>Some content<p>
</section>
<section>
<a id="section2"> </a>
<p>Some more content<p>
</section>
</div>
</body>
Примечание. В моем личном опыте идентификатор можно так же эффективно применить к тегу, а не к избыточному, и это все еще работает... Я сделал это только в этом примере, потому что некоторые пользователи отметили проблемы с идентификаторами таргетинга выше DOM дерева, чем это... Я не мог лично воссоздать эту проблему, так что, эй, в любом случае работает!
Затем создайте элемент обертки и тело, чтобы правильно вести себя
body { position:relative; }
.wrapper { overflow:auto; position:absolute; top:0; height:100%; width:100%; }
Затем jQuery
$('.scroll-to-id').on('click', function(event) {
event.preventDefault();
var target = "#" + $(this).data('target');
$('.wrapper').animate({
scrollTop: $(target).offset().top
}, 1500);
});
Когда вы нажимаете на heading gs_button
тогда anchor tag
в heading
также получает clicked
, поэтому ваша animate function
не работает. Попробуйте связать событие click на anchor
вместо heading
например,
$(document).ready(function(){
$("#gs_button a").click(function(e) {// bind anchor here
$('html, body').animate({
scrollTop: ($("#company_info").offset().top)
}, 1200);
e.preventDefault();// to prevent default working of anchor;
});
});
Надеюсь, это сработает.
Демоверсия в Firefox
и Chrome
.