Horizontal Smooth Scroll One Page

Levi Stroop

I've been building a horizontal one page site. And for the past two days, I've been trying all kinds of different things with no luck. Finally, I figured out how to make the smooth scroll work. But not entirely.. It slides over slightly, but it does not slide the full section.

Here's the function.

    $(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;
              }
            }
          });
        });

Full site can be found at levistroop.com/test

Any help is greatly appreciated!!

Best, Levi

Gregg Duncan

Try setting 'scrollLeft: target.offset().left' instead of top

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Smooth scroll for one page site

From Dev

page not redrawing on horizontal scroll

From Dev

android horizontal recyclerview smooth scroll in vertical nestedscrollview

From Dev

JS for smooth scroll to the bottom of the page

From Dev

JS for smooth scroll to the bottom of the page

From Dev

Full Page Horizontal Scroll Content

From Dev

Prevent Overflow Horizontal Scroll on page

From Dev

Smooth scroll to anchor after loading new page

From Dev

Smooth Scroll to anchor edit page top

From Dev

Horizontal scroll - page is smaller than the screen size

From Dev

No horizontal page scroll when nowrap is set on DIV

From Dev

jquery scroll to anchor different page horizontal images

From Dev

Horizontal page scroll in chrome mobile browser

From Dev

Very long horizontal scroll to the left in my page

From Dev

Horizontal dragging is blocking the default vertical scroll of the page

From Dev

How to get rid of horizontal scroll of a page

From Dev

Avoid horizontal scroll HTML web page

From Dev

Horizontal Scroll View/Page Control using Buttons

From Dev

Smooth scroll to

From Dev

Horizontal EditText scroll one character at a time

From Dev

android two scroll horizontal and vertical in one activity

From Dev

Horizontal scroll bar page navigation with vertical scroll bars

From Dev

One Page Scroll Plugin Pagination

From Dev

Smooth Scroll works only from the same page and not from external links

From Java

How to smooth scroll to page anchor in angular 4 without plugins properly?

From Dev

how to make page scroll smooth when link click

From Dev

How to smooth scroll to an id after clicking a link from another page

From Dev

Smooth scroll to anchor offset pixels, except one specific anchor?

From Dev

Why can't I get jquery ui sortable to have a "smooth" horizontal auto scroll?

Related Related

  1. 1

    Smooth scroll for one page site

  2. 2

    page not redrawing on horizontal scroll

  3. 3

    android horizontal recyclerview smooth scroll in vertical nestedscrollview

  4. 4

    JS for smooth scroll to the bottom of the page

  5. 5

    JS for smooth scroll to the bottom of the page

  6. 6

    Full Page Horizontal Scroll Content

  7. 7

    Prevent Overflow Horizontal Scroll on page

  8. 8

    Smooth scroll to anchor after loading new page

  9. 9

    Smooth Scroll to anchor edit page top

  10. 10

    Horizontal scroll - page is smaller than the screen size

  11. 11

    No horizontal page scroll when nowrap is set on DIV

  12. 12

    jquery scroll to anchor different page horizontal images

  13. 13

    Horizontal page scroll in chrome mobile browser

  14. 14

    Very long horizontal scroll to the left in my page

  15. 15

    Horizontal dragging is blocking the default vertical scroll of the page

  16. 16

    How to get rid of horizontal scroll of a page

  17. 17

    Avoid horizontal scroll HTML web page

  18. 18

    Horizontal Scroll View/Page Control using Buttons

  19. 19

    Smooth scroll to

  20. 20

    Horizontal EditText scroll one character at a time

  21. 21

    android two scroll horizontal and vertical in one activity

  22. 22

    Horizontal scroll bar page navigation with vertical scroll bars

  23. 23

    One Page Scroll Plugin Pagination

  24. 24

    Smooth Scroll works only from the same page and not from external links

  25. 25

    How to smooth scroll to page anchor in angular 4 without plugins properly?

  26. 26

    how to make page scroll smooth when link click

  27. 27

    How to smooth scroll to an id after clicking a link from another page

  28. 28

    Smooth scroll to anchor offset pixels, except one specific anchor?

  29. 29

    Why can't I get jquery ui sortable to have a "smooth" horizontal auto scroll?

HotTag

Archive