How to apply horizontal smooth scrolling to (example included) JQuery website? - javascript

A very generous Stack Overflow user helped me with the following drag horizontal navigation (seen here: http://jsfiddle.net/eT5MM/2/) and I'm now trying to implement the JQuery smooth horizontal scrolling as an additional form of navigation, should a user be on a mobile device: http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/
Unfortunately, my reference links aren't working properly, and I'm not sure if there is conflicting JavaScript, or something different. The website is not currently live, so unfortunately I'm unable to share that code, however it is nearly exactly the same as the above JSFiddle code, and I'm using
<a name="Name">
and
<a href="#Name">
to navigate the page.
Thank you!
A

using the same code of previous question, here is the clickable scrolling menu
JsFiddle

Related

jQuery/Javascript sticky sidebar jitter

I have a wordpress plugin called Standard Widget Extentions which essentially uses jQuery to create a sticky floating sidebar. You can see this in action on a page on my site, its the sidebar with the social sharing buttons on the left http://turnnatural.com/2-seemingly-healthy-kitchen-items-you-need-to-toss-right-away-and-what-to-replace-them-with/
The issue I have is when you scroll it seems to "jitter" about and doesn't have a fluid movement. Is there some javascript/jquery/css changes to fix this?
I have asked in the forum of the creator but I get no response and I'm at a loss.
Thanks

HTML5 auto scroll to next section

As you can see right here: https://www.sequoiacap.com/
I'm trying to mimic its scrolling behavior right here, and its implementation really baffles me. Is it scrolling to another section? Or is it scrolling the background? Is there a name for this specific website style?
I have a one page parallax theme that I would like to auto scroll for user, so that each scroll gives the user a new fullscreen section. I would like to know how many plugins I would need to use. Some basic examples or directions for research would be greatly appreciated.
Thank you.
Here's 2 possible ways out of many, for how you could implement this:
jump.js which is a dependency-free library (meaning it does not require jQuery or similar)
fullPage which is a full page slider plugin for jQuery. This might be more of what you want, because it does not introduce a scrollbar.

How to have fixed scrolling in a webpage?

I'm trying to figure out how to have fixed scrolling in a webpage like what's used here: http://manifeste.hermes.com/en_WW/?
It looks like when you scroll it automatically smooth scrolls to the next div. I assume there's some JavaScript involved, but it's beyond my knowledge how to do this.
Can anyone show me how this is done?
You can use this nice, lightweight javascript plugin alvarotrigo fullPage.js
they have a nice explanation and examples on the github page.
fullPage.js Demo

Highlighting nav without jquery

I have a web page with anchor links and I wish for them to stay highlighted when they are clicked AND when the user manually scrolls down. I have seen some jquery code here codepen.io/jakob-e/pen/mhCyx that does what I wish to do, however I wish to achieve this effect using raw javascript and I can't see it posted anywhere. Thanks for any help.
Sounds like you're looking for animated scrolling and scrollspy functionality? Shameless plug for two native JS (non-jQuery) scripts I wrote that are designed to work together:
Smooth Scroll: https://github.com/cferdinandi/smooth-scroll
Gumshoe for scrollspy: https://github.com/cferdinandi/gumshoe

How do we make a styled scroll bar for a <div> with mouse wheel sensitive

I need to create an area of the page that has it's own scroll bar, just like the Facebook messenger in the image below.
Stack overflow has the same system at the answers with large pieces of code, but that scroll bar is not styled.
Note at the picture and you will see the normal scroll bar and the styled scroll bar in the Messenger DIV. Anyone knows how to do it?
I imagine that custom scrollbar is implemented in javascript, it looks very slick and you can't make a browsers scrollbar look that good!
Find an example I just put together for you at: http://jsfiddle.net/9LHPW/2/ - note check the resources tab as this includes four external files (3x Js and 1x CSS)
Have a look at this website for a further example (looks like exactly what you want) with Javascript and jQuery: http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
You can find the plugin's home at http://manos.malihu.gr/jquery-custom-content-scroller
Along with a how to use it section!
This should help: http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
Another one here: http://dotroe.com/subpage.html
Those are jquery plugins that you can use on your pages.
Use j scroll pane. It's great, very customisable, lots of demos here: http://jscrollpane.kelvinluck.com/#examples

Categories

Resources