What is the method for scrolling left in HTML?

Question

What is the method for scrolling left in HTML?

I'm in the process of creating a one-page website that includes standard sections like services, portfolio, contact, and blog. When users click on the navigation menu for 'services', 'portfolio', and 'contact', it smoothly scrolls to the desired section without any issues.

My unique idea is to implement a different scrolling effect when users navigate to the blog section - instead of the typical up and down scroll, I want it to scroll horizontally from right to left for an engaging user experience. Currently, this functionality is partially working but there's a small problem. When users are at the bottom of the page (e.g., the contact section) and try to navigate to the blog, it first scrolls to the top before moving horizontally to display the blog section.

To improve this, I aim to eliminate the unnecessary vertical scrolling to the top and just smoothly transition into the blog section with a horizontal scroll from the point where users are currently positioned.

Do you have any suggestions on how to achieve this seamless sideways scrolling effect? Or should I consider separating the blog section into its own independent HTML file?

Edit

http://jsfiddle.net/VS9dS/20/

Scrolling from the blog to any section or navigating between sections vertically:

$('html, body').animate({scrollLeft: -$(sectionName).offset().left}, "slow");
$('html, body').animate({scrollTop: $(sectionName).offset().top}, "slow");

Scrolling from any section to the blog:

$('html, body').animate({scrollTop: $(sectionName).offset().top}, "slow");};
$('html, body').animate({scrollLeft: $(sectionName).offset().left}, "slow");

I haven't included much code due to time constraints. Currently, my code functions in a way that if a user is on the contact section and clicks on the blog link, it scrolls to the top and then transitions horizontally to the blog as if it's a separate HTML page. My goal is to refine this behavior so that clicking on the blog from any section instantly shows the top of the blog without unnecessary vertical scrolling.

javascript jquery html css

Answer 1

Answer №1

If my understanding is correct and you simply wish to animate one element before another, you can achieve this with the following code:

$('html, body').animate({
    scrollTop: $(sectionName).offset().top
}, "slow", function () {
    $('html, body').animate({
        scrollLeft: $(sectionName).offset().left
    }, "slow");
});

...or if you prefer to scroll to the right after scrolling to the top, you can use this code snippet:

$('a[href=#blog]').click(function () {
    $('html, body').animate({
        scrollTop: $('#home').offset().top
    }, "slow", function () {
        $('html, body').animate({
            left: '-=200px'
        }, "slow",'linear'); //possibly a smoother effect
    });
});

CSS:

body {
    position: relative;
}

Fiddle: http://jsfiddle.net/Matze/eRNde/

http://api.jquery.com/animate/#basic-usage

Answer 2

If my understanding is correct and you simply wish to animate one element before another, you can achieve this with the following code:

$('html, body').animate({
    scrollTop: $(sectionName).offset().top
}, "slow", function () {
    $('html, body').animate({
        scrollLeft: $(sectionName).offset().left
    }, "slow");
});

...or if you prefer to scroll to the right after scrolling to the top, you can use this code snippet:

$('a[href=#blog]').click(function () {
    $('html, body').animate({
        scrollTop: $('#home').offset().top
    }, "slow", function () {
        $('html, body').animate({
            left: '-=200px'
        }, "slow",'linear'); //possibly a smoother effect
    });
});

CSS:

body {
    position: relative;
}

Fiddle: http://jsfiddle.net/Matze/eRNde/

http://api.jquery.com/animate/#basic-usage

What is the method for scrolling left in HTML?

Answer №1

Similar questions

I'm trying to position this div within a table so that it lines up with one of the cells. Can you help me figure out

Performing addition in Javascript can sometimes yield unexpected results, especially when dealing with numbers

Ways to correct misaligned Bootstrap column grid

Guide on creating a hover-based side menu

Change the color of all the text on a page to a designated shade

The hamburger icon on the Bootstrap 4 navbar expands as expected, yet it fails to collapse back when

AngularJS - Choose and establish initial values for Editing or Creating New Items

Organize your Django form with visually distinct groups for better user experience

Attempting to create a redirection landing page

What are the steps for incorporating information into a designated PhpMyAdmin account?

Sending Parameters Using Higher Order Functions

Discover the xpath of an element while bypassing any internal elements

Create interactive HTML tables with detailed information using PHP and MySQL databases

Tips for navigating a list of areas in JavaScript

Attempting to access an HTTP Node server from within an HTTPS environment resulted in an SSL error

"The Promise in the AngularJS Karma test specification did not resolve and the .then() method was not invoked

Trouble with setting up Git Hub Repositories through Ajax JQuery

Vue component not responding to @click event

Is Chrome prone to memory leaks when utilizing a Shared Worker?

What are the best methods for assigning different characteristics to cubes using three.js?