how do I add a javascript scroll effect? - javascript

I'd like to add a scroll effect whereby instead of jumping instantly to the anchor down the page, when you click a link at the top it rolls smoothly down the page. Haven't had any luck yet. It's common in bootstrap websites:
bootsrap template

You can use this for example:
https://www.solodev.com/blog/web-design/adding-an-animated-scroll-down-anchor.stml
Basically, you want to play with the scroll (controller via javascript) to me smoothly to the final position (anchor position). There are many ways you can achieve that.
There's also this post here about it:
Smooth scrolling when clicking an anchor link

Related

smooth scroll to div on mouse scroll

I've looked through a lot of smooth scrolling stuff and none of them do quite exactly what I want it to do. I would like to encapsulate a mouse scroll, and automatically smooth scroll to a specific div. So there the user is never between two divs, the screen is always filled with the next or previous div. Kind of like a hyperlink that jumps to an #anchor but instead of a click, its a mouse scroll, and instead of a jump, its a smooth scroll/transition. Simplest solution would be best. I don't want to involve jquery...
Thanks!
There is a good plugin for doing what you want.
http://www.thepetedesign.com/demos/purejs_onepage_scroll_demo.html

Object fixed below certain point

This is my first post here, before this I have had tremendous help from this forum and all the users previous posts. The question I have now I cannot find the answer to. So:
I have an object (button) which when pressed smoothscrolls the user up to top of the page. Im successful in making it fixed to the top of the screen, however, lets say youre at the bottom of the page and you press the "smoothscroll button", its starts scrolling you upwards to the top. But when your "near" the top I want the button to stop and the scrolling to continue...
Im not sure how to describe it better, but if you go from the top of the page, or when at the top of the page, you dont see the button and when you start scrolling down, youll see the button as any object on the screen "climbing upwards" and when the button reaches the top of the screen it stays there fixed.
Im sure this is common on ads for example..
How would you achieve this? Any help appreciated..
Thx,
Layman
It seems like this is what you want to achieve.
http://stickyjs.com/
if you are still not impressed.. here is a link to the treasure of plugins that would do what you need with very little code.
http://jquery-plugins.net/tag/sticky-scroll
One of my coworkers wrote a plugin that hides a button as the page is being scrolled to the top. You may be able to use similar logic. It would be something like this:
btt.revealPosition = 300;
$(window).scroll(function(){
if($(window).scrollTop() >= btt.revealPosition){
//Add a class here that lets the button scroll with the page
}else{
//Add a class here that fixes the button to the top of the page
}
});
It basically watches the scroll position as you're scrolling back to the top of the page. Upon reaching the revealPosition of the button, you could add a class or modify the css with jquery to change how the button is acting.
This logic was taken from the following plugin:
jquery-backtotop

How to make "Scroll further down" button on website?

I am using wordpress' revolution slider that spans the home page. I want to put a scroll down button, so users are aware they can scroll. I want something like this one: https://exposure.so/
I tried putting a div on top of everything and a link that links to anchor link further down the page. It works, but I don't know how to make the div disappear when the user goes down, and reappear if they go back up. Anyone know how to fix this?
You need to calculate the scrollbar's handle position using javascript or jQuery.
If its towards the bottom of the page, hide the button, else show it.
To find scrollbar position : LINK

AJAX Horizontal Scrolling with scrollbar

I need to create something like this site, I found many jQuery infinite scrolling scripts that allow you to load contents using AJAX while you're scrolling. What I need is very similar, except I want it to be horizontal and I want to set the size of the scroll bar according to the amount of contents I have. If you check out this website you'll see that you can jump from page one to page lets say 3 without loading the second page. Any idea how they do that ? their scroll bar is draggable too ! This is exactly what I need but don't know how. Any help is appreciated.
jQuery lazyload works with horizontal scrolling too.
Look at this example that I created here.
The site you are linking to is not a "horizontal scrolling" page. That's actually pagination not scrolling. If you want to do pagination then you don't need any plug in at all. Just call your AJAX when page or tab link clicked.

jQuery fade li element and cycle it when mouse hovered

I'm trying to recreate an effect in jQuery, where an element (<li> <img>) will be cycled and has a fading effect when hovered. The '<li>' contains '<img>' (image screenshots). When the mouse is on top of element it will keep cycling all that are in '<ul>' with a fading effect. When the mouse is away it will stop cycling the list. I also want to add a pager where you can navigate to the list.
My Existing Code:
link text
My Problem: the current code has some problem with the pagination, it added all images that can be seen on the code. Instead of 1-8 only, it continued to add another 1-8 and another.
Second problem is, It also start cycling and fading when the page loads. The cycling and fading should only be working when the mouse is on top of the element.
I don't know if the 'Cycle Plugin' (Plugin Home Page) is really required on this approach, I wan't it to be minimal as much as possible. I just use 'Cycle Plugin' because it's a quick answer to my problem.
Thanks and merry xmas!
Edits
remove and added a link
I could be wrong, I'm not familiar with this plugin, but it seems like you need an ID for each slideshow you have instead of using a class like you are.
I've setup a JSFiddle with your code and tweaked it. Below is how each slide should function.
starts on mouse over and stop on mouse out
changes on mouseover of the nav
changes when the nav is clicked
The link I gave you in the comments to your question should guide you to the available options for this plug-in. In case you missed it, here it is: plugin options

Categories