CODEWITHSUNDEEP
javascriptjqueryhtmlscrollhyperlink
SeekLoad
SeekLoad

Reputation: 1089

How do I scroll entire page from link to 75% as percent in an animated scroll

How do I scroll my entire page, using a link to 75% as percent in an animated scroll?

I want it to scroll 75% on my page and to write it in percent on the code and at the same time to have it animated as it is.

The animation works, except I cannot get the scrolling to work in percent.

My JavaScript Query code:

function scrollTo75() {
var body = document.body,
    html = document.documentElement;
        var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );
    console.log(height);
    $('html, body').animate({
        scrollTop: height/100 - window.innerHeight/75
    }, 200);
}

My Body Code:

<a href="javascript:void(0);" onmouseover="scrollTo75();" title="Scroll 75%">75%</a>

Upvotes: 0

Views: 461

Answers (1)

sfarbota
sfarbota

Reputation: 2627

Change scrollTop: height/100 - window.innerHeight/75 to scrollTop: height * .75:

function scrollTo75() {
var body = document.body,
    html = document.documentElement;
        var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );
    console.log(height);
    $('html, body').animate({
        scrollTop: height * .75
    }, 200);
}

EDIT: If you need to use 75 instead of .75, you can just do scrollTop: height * (75 / 100)

Upvotes: 1

Related Questions