How to Implement both Horizontal and Vertical Smooth Scrolling

Question

I've been putting together a personal project. I'm relatively new to Java so picking it up as I go along.

Basically I have created a site which has sections I want accessible along both the x and y axis.

I have made these sections accessible using anchor links, so the site does link to these div's.

I have also managed to set up the Vertical smooth scroll animation. So my page can auto scroll up and down seamlessly using the following code:

$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = this.hash;
    var $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
        window.location.hash = target;
     });
    });
  });

However I can't seem to get the same scroll affect to apply for the div's located left/ right. what I want to happen is if I click a link which should go to a Div located to the left or right (off screen) it does a similar seamless smooth scroll left or right while keeping the same up/down animation.

Basically I want to apply both vertical and Horizontal smooth scrolling on the same page.

What changes or additions do I need to make to apply this?

---

I managed to implament horizontal scrolling on my site by making some tweaks to the above code.

$(document).ready(function(){
  $('a[href^="#"]').on('click',function   (e) {
   e.preventDefault();

var target = this.hash;
var $target = $(target);

$('html, body').stop().animate({
     'scrollLeft': $target.offset().left
}, 900, 'swing', function () {
    window.location.hash = target;
     });
     });
   });

This seems to work with horizontal scrolling. Now I need to make these work together at the same time...

I've added both to a seperate file and referenced them in my HTML. However now only the horizontal works. Anyway to make both work at the same time?

Answer 1

I managed to find an answer for this in the end and will post it up for future reference and aid.

Basically when I say I want to use both vertical and horizontal auto scroll I'm not talking about auto scrolling diagonally. I simply mean I have multiple links on a single page. Some which should auto scroll to a different section along the Y axis and some which auto scroll along the X axis.

So to do this I created 2 Js files with the following code and referenced them in my html. I also defined a class on all my links to specify which js file should be associated. e.g. 'up' was for my up/down auto scroll;

Vertical Scroll:

$(document).ready(function(){
$('a.up').on('click',function (e) {
    e.preventDefault();

    var target = this.hash;
    var $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 3000, 'swing', function () {
        window.location.hash = target;
    });
  });
});

Horizontal scroll:

$(document).ready(function(){
  $('a.left').on('click',function (e) {
    e.preventDefault();

    var target = this.hash;
    var $target = $(target);

    $('html, body').stop().animate({
        'scrollLeft': $target.offset().left
    }, 3000, 'swing', function () {
        window.location.hash = target;
    });
  });
});

HTML for assigning a class to a link;

<a class="up" href="#tutorial">Link</a>

Class referenced in js file as shown above;

$('a.up').on('click',function (e)

The problem I was having is as follows. The vertical and horizontal codes conflicted. Both of them used;

 $('a[href^="#"]').on('click'

Which meant when a link was clicked it performed the action. There was nothing to distinguish which direction the action should go when the link was triggered.

by changing this to;

    $('a.up').on('click'

and introducing classes to my links I could specify which links should trigger which JS file and work as expected.

I hope this helps anyone with a similar problem or just looking for some aid with auto scrolling.

Feel free to ask questions. :)