Как добавить плавную прокрутку в шпионскую функцию Bootstrap
Я уже некоторое время пытаюсь добавить функцию плавной прокрутки на свой сайт, но не могу заставить ее работать.
Вот мой HTML-код, относящийся к моей навигации:
<div id="nav-wrapper">
<div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix" data-offset-top="675">
<div class="navbar-inner" data-spy="affix-top">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#service-top">Services</a></li>
<li><a href="#contact-arrow">Contact</a></li>
</ul><!--/.nav-->
</div><!--/.nav-collapse collapse pull-right-->
</div><!--/.container-->
</div><!--/.navbar-inner-->
</div><!--/#nav /.navbar navbar-inverse-->
</div><!--/#nav-wrapper-->
Вот код JS, который я добавил:
<script src="js/jquery.scrollTo-1.4.3.1-min.js"></script>
<script>
$(document).ready(function(e) {
$('#nav').scrollSpy()
$('#nav ul li a').bind('click', function(e) {
e.preventDefault();
target = this.hash;
console.log(target);
$.scrollTo(target, 1000);
});
});
</script>
Для чего это стоит, вот где я получил информацию о том, что я сделал до сих пор, и вот мой сайт в его нынешнем виде. Если ты поможешь мне, я испеку тебе пирог, печенье или еще что-нибудь. Спасибо!
6 ответов
Вам действительно нужен этот плагин? Вы можете просто оживить scrollTop имущество:
$("#nav ul li a[href^='#']").on('click', function(e) {
// prevent default anchor click behavior
e.preventDefault();
// store hash
var hash = this.hash;
// animate
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 300, function(){
// when done, add hash to url
// (default click behaviour)
window.location.hash = hash;
});
});
Если у вас есть фиксированная навигационная панель, вам нужно что-то вроде этого.
Принимая из лучших из приведенных выше ответов и комментариев...
$(".bs-js-navbar-scrollspy li a[href^='#']").on('click', function(event) {
var target = this.hash;
event.preventDefault();
var navOffset = $('#navbar').height();
return $('html, body').animate({
scrollTop: $(this.hash).offset().top - navOffset
}, 300, function() {
return window.history.pushState(null, null, target);
});
});
Во-первых, чтобы предотвратить "неопределенную" ошибку, сохраните хэш в переменной, targetперед звонком preventDefault(), а затем ссылаться на это сохраненное значение, как упомянуто pupadupa.
Следующий. Вы не можете использовать window.location.hash = target потому что он устанавливает URL и местоположение одновременно, а не по отдельности. В конечном итоге вы получите местоположение в начале элемента, чей идентификатор соответствует href... но находится под фиксированной верхней панелью навигации.
Чтобы обойти это, вы устанавливаете в качестве значения scrollTop значение местоположения вертикальной прокрутки цели минус высота фиксированной панели навигации. Непосредственное нацеливание на это значение обеспечивает плавную прокрутку, а не добавление корректировки впоследствии и получение непрофессионально выглядящих дрожаний.
Вы заметите, что URL не меняется. Чтобы установить это, используйте return window.history.pushState(null, null, target); вместо этого, чтобы вручную добавить URL в стек истории.
Готово!
Другие заметки:
1) используя .on метод является новейшим (по состоянию на январь 2015 г.) методом jquery, который лучше, чем .bind или же .live, или даже .click по причинам, которые я оставлю вам, чтобы узнать.
2) значение navOffset может быть внутри функции или снаружи, но вы, вероятно, захотите его снаружи, поскольку вы вполне можете ссылаться на это вертикальное пространство для других функций / манипуляций DOM. Но я оставил это внутри, чтобы сделать его аккуратно в одну функцию.
// styles.css
html {
scroll-behavior: smooth
}
Источник: https://www.w3schools.com/howto/howto_css_smooth_scroll.asp
$("#YOUR-BUTTON").on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $("#YOUR-TARGET").offset().top
}, 300);
});
Если вы загружаете плагин jquery easing (проверьте его), вам просто нужно добавить это в ваш файл main.js:
$('a.smooth-scroll').on('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top + 20
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
а также не забудьте добавить класс с плавной прокруткой к вашим тегам a следующим образом:
<li><a href="#about" class="smooth-scroll">About Us</a></li>
Я объединил это, и это результаты -
$(document).ready(function() {
$("#toTop").hide();
// fade in & out
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('a[href*=#]').each(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname
&& this.hash.replace(/#/,'') ) {
var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($target) {
var targetOffset = $target.offset().top;
$(this).click(function() {
$('html, body').animate({scrollTop: targetOffset}, 400);
return false;
});
}
}
});
});
Я проверил это, и он отлично работает. надеюсь, это кому-нибудь поможет:)
Какие onetrickpony опубликовано нормально, но если вы хотите иметь более общее решение, вы можете просто использовать код ниже.
Вместо выбора только id якоря, вы можете сделать его более стандартным и просто выбрав атрибут name из <a>-Тег. Это избавит вас от написания дополнительных id тег. Просто добавьте класс smoothscroll к элементу navbar.
Что изменилось
1) $('#nav ul li a[href^="#"]') в $('#nav.smoothscroll ul li a[href^="#"]')
2) $(this.hash) в $('a[name="' + this.hash.replace('#', '') + '"]')
Окончательный код
/* Enable smooth scrolling on all links with anchors */
$('#nav.smoothscroll ul li a[href^="#"]').on('click', function(e) {
// prevent default anchor click behavior
e.preventDefault();
// store hash
var hash = this.hash;
// animate
$('html, body').animate({
scrollTop: $('a[name="' + this.hash.replace('#', '') + '"]').offset().top
}, 300, function(){
// when done, add hash to url
// (default click behaviour)
window.location.hash = hash;
});
});
С этим кодом идентификатор не будет отображаться в ссылке
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});