移动时从水平滚动变为垂直滚动

Question

我的网站是响应式的。从笔记本电脑访问时，它具有水平导航，但从移动设备访问时，我想更改相同的滚动动画，但要垂直...

 <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

如果我需要提供其他任何东西，请告诉我。

亲切的问候

Answer 1

像这样修改你的 .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;
  }
}