Мой сайт является отзывчивым. При посещении с ноутбука он имеет горизонтальную навигацию, но при посещении с мобильного я хотел бы изменить ту же анимацию прокрутки, но по вертикали...
<script>
$(function() {
$('.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 500);
event.preventDefault();
});
});
</script>
Веб-сайт www.niklaskoskela.com
Дайте мне знать, если мне нужно предоставить что-нибудь еще.
С уважением
Модифицируйте ваши.js следующим образом:
$(function() {
$('.nav a').bind('click',function(event){
var anchorOffset = $(this.hash).offset();
$('html, body').stop().animate({
scrollLeft: anchorOffset.left,
scrollTop: anchorOffset.top // <- add this line
}, 500);
event.preventDefault();
});
});
</script>
и в.css добавить медиа-запросы:
@media all and (max-width: 1024px){
#one, #two, #three {
float: none;
}
}
.hash
вместо.href
Пожалуйста, проверьте рабочий образец . Обратите внимание, что я использовалdisplay:inline-block
а неfloat:left
. Если есть вопросы, задавайте. Что касается второй части вашего вопроса: я не заметил ваши медиа-запросы. Это не проблема. Вы можете перемещатьfloat: none
к вашему. Это не важно