scroll smoothly to a specified vertical position on a webpage using jquery animation

Question

scroll smoothly to a specified vertical position on a webpage using jquery animation

Hello everyone, I am relatively new to JS and currently working on creating a vertical image scroller. I have successfully implemented code to scroll from left to right on LI elements until the center of that LI is reached. However, I now want to apply this functionality to a vertical scroller with 6 divs set up. When a thumb is clicked, I would like the LI's to be scrolled to that specific position. Below is the code I have used for horizontal scrolling:

Check out my code on FIDDLE

$('html, body').animate({                    
scrollLeft: ((thisImg.offset().left)-windowWidth+imagewidth)}, 1300);});

I attempted using scrollToTop but it did not work as expected. If anyone could provide guidance on how to fix this issue, I would greatly appreciate it. Additionally, I am looking to make the crimson list items capture 100% width and height. Any suggestions on how to achieve this would be helpful.

Thank you in advance. PS: I am aiming to achieve a similar effect as seen on this Demo Site

jquery css

Answer 1

Answer №1

Hello @designerNProgrammer, A great approach to building a website is creating functionality that works even without relying heavily on jQuery or Javascript. You can then use these technologies to enhance those features further. Let's take a look at how vertical window scrolling can be achieved using jQuery:

To start, I would include anchor tags within the #thumbs li's that link to specific id's assigned to the #fullList li's. This simple HTML setup operates without requiring Javascript.

<ul id="thumbs">
    <li><a href="#one">1</a></li>
    <li><a href="#two">2</a></li>
    <li><a href="#three">3</a></li>
    <li><a href="#four">4</a></li>
    <li><a href="#five">5</a></li>
    <li><a href="#six">6</a></li>
</ul>
<ul id="fullList">
    <li id="one">1</li>
    <li id="two">2</li>
    <li id="three">3</li>
    <li id="four">4</li>
    <li id="five">5</li>
    <li id="six">6</li>
</ul>

We can now utilize this basic code structure to add animation effects for window scrolling progressively with jQuery.

$(function() {
    $("#thumbs li a").click(function(e) {   
        e.preventDefault();
        var elId = $(this).attr('href');
        var elPos = $(elId).offset().top;

        $('html, body').animate({                    
            scrollTop: elPos
        }, 1300);
    });
});

You can test it out in this JSFiddle: http://jsfiddle.net/k2ape/2/

If you have other responsive design concerns, considering posting a separate question on SO with a clear title for better visibility and responses. Happy coding!

Answer 2

Hello @designerNProgrammer, A great approach to building a website is creating functionality that works even without relying heavily on jQuery or Javascript. You can then use these technologies to enhance those features further. Let's take a look at how vertical window scrolling can be achieved using jQuery:

To start, I would include anchor tags within the #thumbs li's that link to specific id's assigned to the #fullList li's. This simple HTML setup operates without requiring Javascript.

<ul id="thumbs">
    <li><a href="#one">1</a></li>
    <li><a href="#two">2</a></li>
    <li><a href="#three">3</a></li>
    <li><a href="#four">4</a></li>
    <li><a href="#five">5</a></li>
    <li><a href="#six">6</a></li>
</ul>
<ul id="fullList">
    <li id="one">1</li>
    <li id="two">2</li>
    <li id="three">3</li>
    <li id="four">4</li>
    <li id="five">5</li>
    <li id="six">6</li>
</ul>

We can now utilize this basic code structure to add animation effects for window scrolling progressively with jQuery.

$(function() {
    $("#thumbs li a").click(function(e) {   
        e.preventDefault();
        var elId = $(this).attr('href');
        var elPos = $(elId).offset().top;

        $('html, body').animate({                    
            scrollTop: elPos
        }, 1300);
    });
});

You can test it out in this JSFiddle: http://jsfiddle.net/k2ape/2/

If you have other responsive design concerns, considering posting a separate question on SO with a clear title for better visibility and responses. Happy coding!

Answer 3

Answer №2

Oh, you were almost there! It's actually scrollTop, not scrollToTop. This code snippet has been tested and works perfectly for me:

jQuery(document).ready(function($) {
    $("#thumbs li").click(function() {
        var windowWidth = jQuery(window).width()/2,
            index = $(this).index(),
            thisImg = $("#fullList li:eq("+index+")"),
            imagewidth = thisImg.width()/2;

    $('html, body').animate({
        scrollTop: thisImg.offset().top
    }, 1300);
});
});

If you include normalize.css and remove the margin from the li element, it should stretch the li to 100%. In my example, I didn't use normalize.css but simply set html and body to have no margin or padding.

Check out the Fiddle here: http://jsfiddle.net/maxinacube/6Y3WX For Normalize.css, visit:

Answer 4

Oh, you were almost there! It's actually scrollTop, not scrollToTop. This code snippet has been tested and works perfectly for me:

jQuery(document).ready(function($) {
    $("#thumbs li").click(function() {
        var windowWidth = jQuery(window).width()/2,
            index = $(this).index(),
            thisImg = $("#fullList li:eq("+index+")"),
            imagewidth = thisImg.width()/2;

    $('html, body').animate({
        scrollTop: thisImg.offset().top
    }, 1300);
});
});

If you include normalize.css and remove the margin from the li element, it should stretch the li to 100%. In my example, I didn't use normalize.css but simply set html and body to have no margin or padding.

Check out the Fiddle here: http://jsfiddle.net/maxinacube/6Y3WX For Normalize.css, visit:

scroll smoothly to a specified vertical position on a webpage using jquery animation

Answer №1

Answer №2

Similar questions

The mobile button bar on iPhone is shown when scrolling or jumping up to the anchor, but it doesn't actually scroll or jump to the

Updating JQuery function after window is resized

Enhancing the background of a website with the power of CSS

Showing a table row in jQuery by targeting an HTML5 attribute of a checkbox that is checked

A guide to placing tooltips dynamically in highcharts column charts

The presence of  on the website is causing problems with the dropdown

Leverage the power of the General Sibling Selector to easily traverse through deeply nested elements in your

The initial page in jqgrid may show rowobject value as undefined, but subsequent pages will display the correct rowObject values

Modify the width measurement from pixels to percentage using JavaScript

Remove Bootstrap-Table's box-shadow on the search bar's delete button

Truncating text with ellipsis in CSS when wrapping on a nested div structure

When using jQuery's $.ajax function, the success parameter with the textStatus is being disregarded without any indication

The dictionary of parameters includes a missing value for a non-nullable 'System.Int32' parameter

Form submission fails to trigger AJAX execution

What is the best way to insert data into a multidirectional array using jquery?

Transforming an image into a geometric shape using html and css - step by step guide

How to pass only the clicked element to the onClick function in React.js

What is the best way to iterate through each input in every row and add it to the database?

Is there a way to stack overlapping divs in a layout that resembles a pile of papers?

Tips for using various versions of jQuery at the same time