asp.net – scroll page slowly on #div-ThrowExceptions

Exception or error:

I have a page with height 200% of the total viewable area, which means there are approximately two pages one over another. I have to scroll to the bottom to view the other half page. I divided the complete <body> into two divs each with a height of 100%.

In div1, I gave a link like this to the div2, which works,

<div id="div1" class="mystyle1">
<a href="#div2">Click Me To Go To DIV2</div>


<div id="div2" class="mystyle2">
<a href="#div1">Click Me To Go To DIV1</div>

This works, but it scrolls in an instant, I need it to be smooth so that the user can see the transition. I also tried setting this in CSS:

-webkit-transistion: all 1s ease-in-out;

No luck!

How to solve:

You can achieve conveniently this using Jquery. Googling keywords like animated scroll to top and animate scroll to ID would give you an idea.

Doing a quick fiddle, perhaps this what you want to happen: http://jsfiddle.net/g5D33/

By the way, you have some small typos on your code, like <a> tag is missing with a closing tag and transition spelled with s. 😉

###

For that I always use a small JQuery function

$('a[href^="#"]').click( function(){
        var scroll_el = $(this).attr('href');
        if ($(scroll_el).length != 0) { 
                    $('html, body').animate({ scrollTop: $(scroll_el).offset().top }, 700); 
        }
        return false;
});

JSFIDDLE

For scrolling horisontally:

$('a[href^="#"]').click( function(){
            var scroll_el = $(this).attr('href');
            if ($(scroll_el).length != 0) { 
                        $('html, body').animate({ scrollLeft: $(scroll_el).offset().left }, 700); 
            }
            return false;
    });

JSFIDDLE

Leave a Reply

Your email address will not be published. Required fields are marked *