If you click on the navigation links on Hardly Code's website the browser scrolls to another section of the page.
Can anyone point me to some good reading materials for recreating this effect? I am using jquery, and want the animation to be as smooth as is it on hardlycode.com
The command is
$('html,body').animate({scrollTop : 0},'slow');
Or, if the link has class scrolltop_btn
$('.scrolltop_btn').click(function() {
$('html,body').animate({scrollTop : 0},'slow');
});
as a catch effect, in case javascript is disabled, you should always include the standard HTML anchors too.
If you want to change the duration, you can change 'slow' to the number of milliseconds you want the effect to last.
Use the ScrollTo jQuery plugin: http://flesler.blogspot.com/2007/10/jqueryscrollto.html - http://plugins.jquery.com/project/ScrollTo
Here's a blog post on doing it with jQuery: Improved Animated Scrolling Script for Same-Page Links
You can do just scrolling to top, but that method lets you point it to any section of the page exactly the same as if you were using #anchors. It's a great example of progressive enhancement, since the fancy Javascript effect is in addition to an already completely functional no-Javascript system.
Here a good one:
http://flesler.blogspot.com/2007/10/jqueryscrollto.html
Try the demo first:
http://demos.flesler.com/jquery/scrollTo/
Good luck!
A very simple one which requires no in-page javascript (it simply finds all links which contain an anchor and makes them scroll instead): http://www.kryogenix.org/code/browser/smoothscroll/
Related
Find out a website http://www.boy-coy.com/#home. When you scoll down all content scrolls very smooth. Even if you scroll it fast, scroll is done at specific speed. This makes the website faster and responsive. How this can be achieved with the help of css and jquery?
At first glance.
Try reading their html source code output.
They use a few jquery plugins and legacy browser js plugin calls.
They have a custom and partially obfuscated .js script that is in depth, but you can see the specific properties it is setting on items in the page.
Barring any terms of use issues, you could likely decipher this pages cool scroll technique by working with this sample code as an example. But it is definitely a fair amount of work to write from scratch or post the entire solution here.
Im going to go and look for a smaller example that isnt as involved as this parallax.
And check out this link http:// codepen.io/JTParrett/pen/BkDie its got some starting principals here of some of the images positioning at different locations in the viewport when you scroll.
This link in SO can also help Can I change the scroll speed using css or jQuery?
Kirupa has a nice tutorial that can likely help in getting the smoothe scrolling effect stared too. http://www.kirupa.com/html5/smooth_parallax_scrolling.htm
And this one is pretty awesome. I think I would look into this demo. Be sure to test all of click event demos here. Im sure you could tie in your jquery tween event for the scroll bar with this http://plugins.compzets.com/animatescroll/
Another decent example http://bassta.bg/demos/smooth-page-scroll/
It is called Parallax,
Check this: http://www.w3schools.com/howto/howto_css_parallax.asp
http://matthew.wagerfield.com/parallax/
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
I have an idea for an website which needs this kind of technique. It's compared to the fade-in technique but in my opinion this fits the design better. Is there anyway to disable scroll options and only scroll to an anchor when its button is clicked. If anyone got a link to a tutorial it would be really helpfull as I can't get it clear myself.
To disable scroll options, you can use the css overflow rule like this:
overflow-y:hidden;
To add function to your buttons, you'll have to use js event listeners that are set to listen for clicks:
document.getElementById("t1").addEventListener("click", scrollDown);
After that, you can use javascript or jquery to scroll the page to whatever anchor depending on page position/clicks that have already happened etc.
Here's a thrown together jsFiddle of what it sounds like you're trying to do:
JsFiddle
I use a lot of divs in that example, but the only important thing for function is the id of elements used.
Hope this helps!
We're using this autoscroller script: http://scripterlative.com/files/autodivscroll.htm (the bottom version).
However, we got really stuck since we don't know how to replace the moving "scrollbar" on the scroller side with a pure and simple line with up arrow on top and bottom arrow on bottom.
Functions wise we want this sidebar to behave exactly like the original sidebar and of course be cross browser compatible. We just want to get rid of the original scrollbar and replace it with a much cleaner and more stylish style.
Is this doable?! How?
Best regards Stefan
Just found jScrollPane on AjaxRain.
Implementing an autoscroll would take some coding, but should definitely be possible by just sending the click messages to the div manually so that it would do the scrolling. If it looks like this will suit your needs, I'd chip in with some additional implementation code. That topic may actually be better suited for another question, if you decide on jScrollPane.
Edit: updated link above. also, there are demos there for scrolling on hover and clicking on a link to jump to an anchor. Custom code for an autoscroll should be relatively simple to write from there.
Is there a good Javascript library for generating an automatically scrolling list like the "Top Tweets" on the Twitter homepage? Preferable as jQuery plugin. It should also support AJAX functionality (to add new list items dynamically).
As we were not really satisfied with the existing solutions we implemented one from scratch. Our solution is a fully jQuery UI compatible ticker plugin (also compatible with their theming framework) and fully unit tested. We didn't yet have the time to test it under every browser, so feedback is welcome (for problems please open issues on the below Github project site).
A special styled demo (Twitter like) is available here.
The main main repository can be found here (ticker branch). There are several options to customize the ticker (documentation at the above mentioned Github repository).
Screenshot:
Here is a nice solution: Scrolling List
Try http://www.htmldrive.net/items/demo/38/Multi-purpose-slideshowtext-scrollerimages-scroller-jquery-plugin
That is the best solution I was able to find:
Scrolling List
If you want to write your own, make a div of fixed width/height, with overflow: hidden, then create another div inside it, with the position: relative property, filled with content from your feed (twitter posts, or similar, etc). Then, when the page loads just make the inner div's top: CSS value change (if you want the list to scroll up, the top value should decrement from zero).
I doubt this helps, but it is quite a good, simple way to get a scrolling without using a jQuery plugin.