jQuery animeren scroll

Ik weet niet zeker hoe ik het effect moet aanroepen, maar kan iemand me verwijzen naar een bibliotheek die me kan helpen hetzelfde effect te bereiken als deze website?

http://www.makr.com

Kortom, het gaat met een muisklik omhoog in de rij naar de bovenkant van de pagina. Een codefragment, bij voorkeur jQuery, kan daarbij helpen, als er niet zo’n gespecialiseerde effectbibliotheek voor is.

Ik weet niet zeker of ik een ander onderwerp moet beginnen, maar kan iemand me helpen met een klein jQuery-fragment om het hele effect van de Makr-gebruikersinterface te bereiken?


Antwoord 1, autoriteit 100%

Je kunt de scrolltop van de pagina animeren met jQuery.

$('html, body').animate({
    scrollTop: $(".middle").offset().top
 }, 2000);

Bekijk deze site:
http://papermashup.com/jquery-page-scrolling/


Antwoord 2, autoriteit 2%

Je kunt deze eenvoudige jQuery-plug-in (AnimateScroll) eens proberen. Het is vrij eenvoudig te gebruiken.

1. Scroll naar de bovenkant van de pagina:

$('body').animatescroll();

2. Scroll naar een element met ID section-1:

$('#section-1').animatescroll({easing:'easeInOutBack'});

Disclaimer: ik ben de auteur van deze plug-in.


Antwoord 3

Ik gebruik gewoon:

$('body').animate({ 'scrollTop': '-=-'+<yourValueScroll>+'px' }, 2000);

Antwoord 4

var page_url = windws.location.href;
var page_id = page_url.substring(page_url.lastIndexOf("#") + 1);
if (page_id == "") {
    $("html, body").animate({
        scrollTop: $("#scroll-" + page_id).offset().top
    }, 2000)
} else if (page_id == "") {
    $("html, body").animate({
        scrollTop: $("#scroll-" + page_id).offset().top
    }, 2000)
}

});


Antwoord 5

Er is hier een jQuery-plug-in. Het scrolt document naar een specifiek element, zodat het perfect in het midden van viewport zou zijn. Het ondersteunt ook animatiesuitkering, zodat het scroll-effect er super soepel uit zou zien. Uitchecken animatescroll.js .

Other episodes