Scroll to anchor points only / override scrolling - javascript

I wanted to implement a function where the page automatically scrolls to the next anchor point (up or down), similar to this page:
http://www.htc.com/ch-de/smartphones/htc-one-m9/
I already have the page somewhat set up (http://www.cubee.ch/wip) and most things run smoothly, but I could not figure out how to scroll to an anchor without a link/click :(
Thanks for any help!
Simon

There is a lot of plugin to make this. Here is one:
https://github.com/alvarotrigo/fullPage.js

Related

Topbar covering webpage header

I'm making a website and want a navigation bar that stays at the top of the screen. I can do this fine but when I scroll to top it goes above header. How do I get it to stop scrolling with the user before the top of the page? I have watched countless tutorials but none seem to work. I think I need JavaScript to unstick the bar at a certain height, but unsure how. Also how do I restick it when the user scrolls back down?
Yes, you will need JavaScript to handle this. It is not too complicated, but you will basically need to add an event handler for the scroll event on the window, and inside the handler you can check the scrollTop of the window to see how much has been scrolled. When it has been scrolled "enough" (usually the height of your header) you can then switch the position of the header to fixed.
You can see a demo about it on the excellent CSS Tricks, and there are many tutorials and plugins that can help with this.
Yes, as danwellman said, you need js.
I have a small code I used in my webpage.
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '.navbar-fixed-top',
offset: 51
});
You need a file like "scrolling-nav.js" or anything you prefer. And in your html, don't forget to call it.
// In the end or in the beggining you call your js file
<script src="...(filepath)/scrolling-nav.js"></script>
There are many more cool possible snippets you can find. This is really to keep the navbar fixed after the offset of '51'. You can also add the smoothed movement to the webpage section after selecting a menu button.. If you have a onepage website, for example. This would also be js.
Good luck. :)

JavaScript Number changes while scrolling

I'm currently working on a website. I want to have a fixed text (I know how to do that) that changes if you scroll.
So if you're on top of the page it shows '0' and then, while scrolling, the number goes up and up and when you scrolled one viewport-height it should be '10000'.
I think this should be done with javascript, but I'm just a beginner with it. Could you please help me? Thank you very much.
edit
Thanks Ajay for the tip with the onscroll function. But this always just adds a number on scrolling. I want something like this (look at the top left hand corner). Where the size is relative to the position on the site and not the scrolling wheel.
Try using the onScroll event of javascript.
Here is a useful link to learn.

How can I make my page scroll to the middle on load

I know this question has been asked before but I did not find the solution on those previously asked questions.
Can someone please help me figure out how to scroll my page to a certain spot on when I refresh the page or when I first come in to my page?
Well, use on of the solutions below depending on what you need. If you want a "smooth scroll" ypu can search on SO for it. There are a lot of threads covering both this and that.
$(window).scrollTop(200); //to scroll 200px
var targetOffset = $('#yourelement').offset();
$(window).scrollTop(targetOffset.top); //scroll to a certain element
jQuery API on scrollTop()
Smooth scrolling on jsfiddle
Create an anchor at the point you want to scroll to. On page load you can use jQuery to scroll to that anchor. More here: Jump to anchor tag without showing hashtag in URL
$(document).scrollTop( $("#middle").offset().top );
If you have an element in the middle of the page with ID of #middle, the above code will do the trick. So adjust as needed to scroll to the part of the page you need.

jQuery - Continuously scroll div on hover

I wish to build a shelf of content much like on Netflix where when you hover over arrows on either end the shelf scrolls at a continuous speed. Ideally, I would also like to make it so when you click the arrows it scrolls a chunk along, so you have the option to click like made to get through a shelf quickly.
This will be using lazy loading so you don't need to worry about repeating content, but obviously it won't have a set width (other then the outside container being 100% with overflow scroll.
Also, this needs to be actually scrollable, so it will work on tablets/phones.
I have no idea here to start so any directions would be great.
Thanks,
Jake!
Image of netflix shelf.
UPDATE: Check out the Smooth Div Scroll jQuery plugin. It slides continuously through the image, you can hover the mouse on the div and manually scroll back- and forward.
Original answer:
I might be off with that, but check out these two plugins:
jQuery Coverflow plugin or the jQuery Imageflow plugin
I think the keyword you are looking for is "flow" and there are multiple flow plugins for jQuery. Hope this helps.
Best regards,
Michael

jQuery scroll takeover, scroll in sections

I've seen one or two sites lately that take over the default scrolling in browsers.
When scrolling down, it will animate a scroll down to the next content section (stopping any scroll events during the animation.
When scrolling up, the same thing happens, but to the previous section.
The site I currently have is here: http://cirkut.net/sub/proven/parallax/
I've got the parallax down, but I can't think of an easy way to takeover the scroll and animate this. I'm fairly certain there must be a js/jQuery plugin to do this (I'm currently using stellar.js).
I've been searching for hours to find the example of what I want, but I can't find anything. If I find one, I'll come back and edit this.
Thanks for any leads or help!

Categories