水平平滑滾動一頁

我一直在構建一個水平的單頁網站。在過去的兩天裏，我一直在嘗試各種不同的東西，但沒有運氣。最後，我想出瞭如何使平滑的滾動工作。但並不完全......它略微滑過，但不會滑動整個部分。水平平滑滾動一頁

下面是該功能。

$(function() { 
      $('a[href*=#]:not([href=#])').click(function() { 
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
       var target = $(this.hash); 
       target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
       if (target.length) { 
       $('body').animate({ 
        scrollLeft: target.offset().top 
       }, 1000); 
       return false; 
       } 
      } 
      }); 
     });

完整網站可以在levistroop.com/test

發現

任何幫助是極大的讚賞！

最佳，列維

來源

2015-10-09 Levi Stroop

嘗試設置「scrollLeft：目標。 offset（）。left'而不是top。 –

完美！我完全錯過了。非常感謝。 –

@GreggDuncan你可以將其設置爲信用的答案。 –

嘗試設置 'scrollLeft：target.offset（）左'，而不是頂部

來源

2015-10-09 16:24:58

只是一個小變化：

$(function() { 
    $('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('body').animate({ 
      scrollLeft: target.offset().left 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
});

來源

2015-10-09 16:27:34

水平平滑滾動一頁

回答

相關問題