Can you please help me to install Elevator on my page?

So, I found this jQuery plugin: https://github.com/inzycle/jquery-elevator. Unfortunately I’m not so familiar with JS and jQuery. I tried adding it by myself but I can’t make it to work. Can you please help me to install it on my website? I need it at: http://www.klayz.com/community/. Basically I need it to work this way:

https://vid.me/6UNj

Nothing else. Additionally, if possible, the hover tooltips for “Go to top”, “Go to bottom” would be great too. Let me know! And thank you in advance for any reply!

Where did you add it? There’s no evidence there now…

You can just use Elevator.js. It’s smaller, more widely used, and doesn’t require jQuery. Google even used it once, but I can’t remember what page. All you need to do is include the js file (just save this), put this at the bottom of your page:

<script>
    var elevator = new Elevator({
        duration: 1000
     });

    $(document).on('click', '.elevator-button', function(e) {
        e.preventDefault();
        elevator.elevate();
     });
</script>

Then from there just create a link with the elevator-button class and click it.

ie:

<a href="#" class="elevator-button">Take me to the top</a>

Really simple. You can even add music and stuff.

Here’s a demo: https://jsfiddle.net/h0bx4L00/

1 Like

@Gandalf Thank you so much for your reply. I don’t have it now included there. I tried in localhost with a copy of the current community. Just to test it out, if it works I’ll put it online. :slight_smile:

@mawburn Thank you so much for your reply! What about if I want to use the buttons (top-bottom - switch to one button at top/bottom) like in the video?

I don’t understand what’s happening in the video.

If you want to go to the bottom, you’ll have to put in custom targets and add another elevator (I think). Check the documentation.

Demo: https://jsfiddle.net/h0bx4L00/1/

Added a link to the top:

<a href="#" class="elevator-down">to bottom</a>

Added:

var elevatorDown = new Elevator({
    duration: 1000,
    targetElement: document.querySelector('#bottom-of-page')
});

Added another event listener:

document.querySelector('.elevator-down').addEventListener("click", function(event){
    event.preventDefault();
    elevatorDown.elevate();
});

You can use the jQuery $(document).on('click', .elevator-down', function(e) { ... }); instead, but I didn’t include jQuery.

1 Like

That’s just a test page. I just scroll down and when I reach the end you can see (bottom right) that the icon “V” (bottom) disappear and remain just the “^” (top) icon. The same if I go to the top of the page, but obviously inverted. And that’s pretty cool, so I’d like to have that effect in my webpage, if possible. Here is another video I just did (just focus on the bottom right where there are the buttons): https://vid.me/KmZX. I exactly want this effect, nothing more. PS: The video is loading, but it’s not so much different from the previous one. :stuck_out_tongue:

edit: now the video should be loaded and visible. Sorry but I’m having problems with my internet connection these days.

href=“#” is a placeholder for use in example code - the # should be replaced by where you want the link to go if JavaScript is disabled.

For the one going to the bottom of the page it should probably be:<a href="#bottom-of-page" that way if the elevator acript doesn’t run then at least they still end up at the same place.

2 Likes

That’s a good point. TY

I was looking at it strictly from using the library.

1 Like

I see there are some “sections” in the example I downloaded from here: https://github.com/inzycle/jquery-elevator. I don’t need them, I just need the top/bottom buttons/features. If when I hover them… will apeear a little black popup like in the example page, it would be cool too.

“Sections” is the targetElement option in Elevator.js. As @felgall pointed out, you can just link to sections of a page by their id in html without using JS. Same concept. Add an id to where you want to go.

1 Like

Ok, but in order to recreate the buttons and the effect that let them disappear based if you’re on top or at bottom? How would I do this?

I was bored, so: https://jsfiddle.net/h0bx4L00/5/

ahahah thank you so much! Be bored! LOL!
Thank you, now I just have to recreate the CSS style and make the bottom button disappear when you reach the bottom of the page (edit: this at least in Firefox). I tried to recreate the demo page on JSFiddle, but I can’t make it to work there: https://jsfiddle.net/Dakoom/6agur9vn/. Argh.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.