I currently have a really great vanilla JS script in place that smooths out the page scroll when the user is scrolling with the mousewheel. (Original script grabbed from here https://stackoverflow.com/a/47206289/9817996)
After adding a scroll to top link using
Scroll to top for simplicity, I have come across an issue where when this link is clicked, the page scrolls to the top then bounces right back to where it was.
Here is a Codepen showcasing the issue: https://codepen.io/kiaramelissa/pen/zYrYbbj
I have also tried creating a scroll to top button using Javascript but it does the exact same thing. I was wondering if anyone could assist with figuring out what is causing this?
I would ideally like to keep my smooth scroll as vanilla JS and not utilise any bulky plugins. Thanks in advance for any ideas!
This code works only when scrolling with the mouse wheel. But there is a problem with it.
update() function is constantly being called when scrolling down (up works ok). This is because moving is always true (delta always > 0.5).
if (Math.abs(delta) > 0.5)
If you put a console.log there you will see it for yourself.
I can't actually understand why the 0.5 is selected as a value, but if you make it 1 it will work for both scroll up and scroll down.
To further see my point, if you leave it as it is (0.5), and try to just scroll a little bit up after you scroll all the way down, you will see that the button works without bouncing back down.
After you make it 1, smooth scroll continues to work for both directions, and when the button is pressed, it stays up.
BUT the scroll to top (with the button) is not smooth! That is expected because your js code only works for mousewheel event, not with the # you used.
Let me just say that if your intention is to have smooth scroll when you press the button, and don't care about the mousewheel, then you will be better off with something like this:
css scroll-behavior or like this javascript scroll anchor without the need of your existing code.
If you want to keep the smooth scrolling when mousewheel is used, then you should use the javascript method from the above link, along side your existing code.
Also one more thing: If you press the button, before the scroll finishes (while easing out) it will jump to top and then it will bounce back where it was. That's expected, as js scroll code doesn't know anything about the button scroll behavior.
Related
I know this question sounds confusing, so here's a better explanation:
I'm using a mobile. Say there's a scrollable element somewhere in the body. When I scroll the element and it reaches the bottom, I want instead of getting stuck for keep scrolling the element, it scrolls the page instead. That's also true if I reach the top of the element, it scrolls up the page, not getting stuck.
I tested it on two different mobile phones with the latest version of Chrome. The First one does exactly that. Weirdly enough, the second one only works when it gets to the top but not to the bottom. Is there any way to make it always work irrespective of the environment (mobile phone or browser) we are using?
Edit: What I'm trying to achieve with this
Desktop:
I want a way so that the buttons placed at the bottom of the content are not so distanced from the user's view. If we remove the scrollbar, then the users have to scroll all the way to the end of the content to be able to click the buttons.
The problem with this method is that, on mobile, in some browsers, it blocks the user from scrolling the page, even after reaching the end of the element. So they have to touch the edges of the screen to be able to scroll the page instead of the element.
What I want is, for users having difficulty touching the edges, they can still scroll the element. And when it reaches the bottom of the element, it scrolls the page.
I know this is weird. I know some of the better tricks like using the Read More-Read Less button, but it requires JavaScript I guess? I'm in a situation that's really hard to use JavaScript at the moment (shortly because of how bad the code is organized), and looking for a way if there's a simple trick using pure CSS. Any help or idea is appreciated!
Here is my scenario I have a web page which will navigate through using mousewheel and scrollbar. I have fixed the mousewheel problem.... But the problem where I use the scrollbar it will navigate to the end or go to the first it depending on the scrollbar you pressed up or down.
I know the error is $(window).scroll(function) here due I navigate from Div 1 to Div 2 which will fire the event a lot of times when the scroll bar moving.
Here is my fiddle
The problem is where i when i scroll using the bar beside down or up. It will trigger until the end of my onscroll event.
Is it possible when i press the scrollbar once only trigger once ?
An alternative way i know is hide the scrollbar and design a fixed position button up and down will resolve this problem but is it possible to do this with default scrollbar/overflow ?
Tried your fiddle. When using mouse wheel, it kept pending between headers 4 and 3 after I reached the 4th one. When I removed the $(window).scroll() function, it worked perfectly, both down and up.
The scrollbar, however, is quite a complicated issue - when you click/tap and drag, you simply can't "steal" the scrollbar from your pointer/finger - the user keeps dragging, yet you're trying to reposition the scrollbar/content forcibly. I don't think this is a good idea (from the UX point of view).
Not sure if it fits your requirements but in case I'd want to fully control the content, I'd completely remove the scrollbar in CSS and then use the mousewheel or swipe functions to control it.
I am using fullPage.js for a one pager website. It works beautifully. It has support for scrolling through full page slides at the flick of the scroll wheel, and each slide can also contain a horizontal slideshow, normally triggered at that point by clicking one of the side arrows.
I want to force the user to scroll through that slideshow before they can progress down to the next slide. Does anyone know of a way to allow the slideshow to be triggered with the mouse wheel when scrolling down? Then when it hits the end of that slideshow it scrolls vertical again to the next slide?
You can do it with jquery.mousewheel like:
$('#fullpage').on('mousewheel', function(event) {
if (event.deltaY > 0){$.fn.fullpage.moveSlideRight();}
else{$.fn.fullpage.moveSlideLeft();}
});
https://github.com/jquery/jquery-mousewheel
Update 2016
Now fullPage.js provides the Scroll Horizontally extension for it.
What you want to accomplish is not that simple to implement in the plugin. Also, I would say forcing the user to follow a path is not consider as a good practice from the user experience point of view.
Also, what should happen once the user reach the next section and then scrolls up? Should he follow all the way back throw the slides of the previous section again in order to keep moving up ?
Anyway, if you want to accomplish it by your own, you would need first of all, to avoid the auto scrolling behavior when scrolling withing your slides (or the section slides for which you want to apply this).
And then, you would need to change the scrolling behavior to trigger the action to go to the next or to the previous slide by triggering the control arrows events depending on the scrolling direction.
Once the end of the slider is reached, you would need to add again the auto scrolling even.
It really doesn't sound simple if you want to do it by your own. You would need to recode the plugin.
I am trying to do a specific way to move an image (just an image, not background) to a certain spot when you scroll. So say I load a page, the page loads then an image slides to the left of the page and when you scroll, the image slides to the middle or bottom or where ever you want when you start scrolling the page. And the image stays they there by a set of texts or info. I have tried many things such as:
stop().animate({"top":(window.scrollY)
I cannot get it to stay there at the spot when scrolling to that specific spot, if you keep scrolling down, the image continues to scroll down when I scroll, and I am not sure how to stop the image after a certain point.
Then I tried this:
if($(window).scrollTop() + $(window).height() == $(document).height()) {
var a = $(window).height() - 100;
$('#scrolling').animate({
However, I cannot get it to work, it doesn't go back up to top when scrolling back to the top.
Any thoughts on how I would get the image to float in to the center or top or even on the sides and then move to a spot when scrolling down? Am I on the right path or am I totally going about this incorrectly? It feels like I am missing something here, and I am not sure what it is.
I thought I could do this in HMTL5 with animation protocols, but I do not think I can acheive that, and I know CSS3 is robust, but it is also very choppy, so I think JQuery or JavaScript is the way to go, and I can get it partially working but not fully. Any thoughts?
I have searched this site and I cannot find what I am looking for. These are the sites I have found that are similar: Animated Scroll Image to a particular position on a window and this: How to make an element fake position:fixed so it acts fixed until a certain scroll height, then attaches?
But I need an image to move to a spot. Are these links in the right direction? Are the example codes I gave somewhere to start with?
Take a look at Skroller, it is a JS library (not jQuery dependant, it needs require js though) that allows you to define certain actions.
Basicly you add some data elements to a div, one that says at what pixel (of scrolling) it should start animating, when it stops, and what it does (goes to the middle of screen for example) dsuring that scroll.
Scrolling back up works well (used it in a project of ours)
http://jsfiddle.net/nicktheandroid/7raYa/9/
My script allows me to scroll the page like a PDF, allowing you to grab the page and drag down or up. My problem, is that when i use the scrollbar, then mouseup from the scroll bar, the scrollbar will stick and scroll with my mouse up and down, even though my mouse is up. So when clicking on the scrollbar, its like i never moused up. how do I fix this?
THANKS!
I believe the scrollbar is part of the page, so when you click it, it makes your script believe the mouse is down - you'll notice that after you mouseup from clicking on the scrollbar that the page continues to move up and down until you click. Try to grab the coordinates of the mouse on mouse down, and make sure that the click occurred inside of the page (minus the scrollbar)
Edit: I was correct - here is the updated jsFiddle with it working: http://jsfiddle.net/xDtVL/