使用引导程序，使幻灯片向上或向下滚动，而不是向左或向右滚动

Question

I have seen some website has this: they have only one page (actually they have some pages, but only show one at one time) on their homepage, which means they have no vertical scroll bar, but when you put your fingers scroll up and down on the touchpad, the homepage will scroll up or down smoothly,show some different contents.

Just like you have a slide, but the slide go up and down, not left or right. Sample link: http://tangyan.maxinrui.com/

Can somebody show me how to did this, maybe using Bootstrap? Or give me a sample page.

Thanks in advance.

Answer 1

You can make it with buttons, I don't know if you want that.

Make a file called extra.js put the following code in it:

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash,
        $target = $(target);

        $('html, body').stop().animate({
        'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});

on the pages the extra.js is loaded all anchor links will scroll.
(Anchor link is just a link with 'id="one"' 'href="#one"')
I think when you want to make it scroll when the user scrolls you could hook this up to some javascript.