yes, there are similar questions, where scrollTo doesn't work on Ipad, but I didn't yet find the solution, that works for that little snippet down there. So allow me to ask it again.
<body>...pages...more pages...even more pages...
<span onclick="var top = $('body').offset().top; $('html,body').animate({scrollTop: top}, 1000);">Scroll to top</span>
<body>
This works perfectly for Desktop, but not for Ipad.
BTW: I'm using that code snippet on a bigger page, so if this code works for you (on a minimal page), that would be helpful to know, too.
For Ipad, it waits some time, then jumps directly to the top, instead of scrolling smoothly to the top. What am I doing wrong?
UPDATE: We have a fixed element on our page, so the currently available solutions won't work.
Thanks,
Bernhard
Related
I'm loading my site into an iFrame that's on another site. I'd like to scroll to the top of an element within that iFrame. I'm using the Javascript code below:
document.getElementById("cart-wrapper").scrollIntoView({ behavior: 'auto' });
This works perfectly on desktop browsers, however it doesn't work at all on iOS mobile (I've tested Safari and Chrome). I've tried the smooth scroll polyfill (https://github.com/iamdustan/smoothscroll) but that doesn't work either (I've basically included <script type="text/javascript" src="/js/smoothscroll.js"></script>) )
Any solutions? Thanks
Few days back , I was also facing this issue. I fixed it with iScroll
I tried iScroll
I would be able to help you, if you need any
I am working on this site "http://tinyurl.com/joblnmd". On home page there'gif animation, I've used preload method to load images, its working on all major browsers expect safari on Mac.
Is this bug in safari or is there any hack?
New Post: I've looked at the site again and there doesn't seem to be any problems. The loading hourglass appears for a long time, but it eventually disappears and the main content of the page is visible. It might be best for your to provide a JSFiddle with just the area in question so that I, or someone else, can have a proper look and help you solve your problem.
Old Post: Maybe you need to update your browser. My Mac Safari appears to show everything perfectly. But I'll check again later tonight. The animation looks very nice.
So I've been working on a website, and the main focus of the site is a javascript-driven 3D carousel, and I got the code for the carousel from here: https://github.com/kaizouman/3dcarousel
I integrated the code into my site, and only modified the number of carousel items and the size of each item. I left the rest of the code untouched (demo.js and 3dcarousel.js). It works perfectly, but only most of the time. I've noticed that it'll work perfectly in Chrome about 90% of the time, in Safari about 80% of the time, and in Microsoft Edge & IE, it pretty much never works. When it doesn't work, it just loads each image individually. When it happens in Chrome, if I keep refreshing the page, it'll eventually work properly. Also interestingly, when I navigate to another page in Chrome and then hit the back button, the carousel will always fail to load.
Here's what it looks like in Microsoft Edge and also when it fails to load in Chrome:
And here's what it looks like when it loads properly:
I can't for the life of me begin to figure out why this is happening, does anyone have any idea? The website is located at http://lipocircuit.com/new.html.
WOW this was a simple fix, I just commented out the line that includes the prefixfree.min.js script, I guess that's outdated and not needed anymore. I feel dumb but I'll leave this up in case anyone else has this issue.
I am using this swipe script from iDangero but I have a small, everywhere it works perfect but only Chrome on windows is giving me a hard time. I already stated the issue at the owner of the script but he can't find a solution for the script at this point, maybe somebody here can help me.
Issue at GitHub:
https://github.com/nolimits4web/Swiper/issues/825
Script URL:
http://www.idangero.us/sliders/swiper/
URL:
http://testjevorm.nl/magazine
The Problem:
As soon as you go to the website you have the possibility to navigate to the next slide in two ways:
Click on the "UITGELICHT ARTIKEL"-block on the left.
Click on the arrow on the right
When you click on the block on the left it's not possible to scroll up and down on the next page (the scroll is somehow not working/disabled). The weird thing is that it "activates" when you click on the arrow in the menu right or hover over the social media icons on a page.
To show the issue I made a small video:
http://youtu.be/T8Bnz2fsvhU
(Yes, it's windows XP but the problem is also there in Windows Vista and Windows 7)
Part of the solution:
I found out that it has to do with the css I added myself:
body {width:100%; height:100%;}
html {width:100%; height:100%;}
When I remove this, the problem is solved but then all the pages have the same height as the longest page in the serie.
just tried what you told me to do on my Mac. It works fine on my Mac, but that's not what you said that didn't work, so I tried it on a Windows 8 Laptop.
Well... it works perfectly fine for me, with Chrome 35 on Windows 8. I assume that you either resolved the issue, or that there's something wrong with your Windows XP setup on mac.
Note: I highly doubt that there is a issue on your website, which will only "show up" in Windows 7 or below, as Windows has always been pretty much downwards compatible (and I'm sure they haven't changed anything about the scroll behavior).
Note 2: If you're still having the issue, it might be chrome on Windows XP. But as you want it to work on that as well (or your companies policy states so), then try this:
In your CSS, simply add overflow-x: scroll to your body.
I have a one-page website built on Bootstrap. All of the menu items are internal links pointing to divs in the body, and I have a bit of smooth scroll javascript to animate page's scrolling.
Everything works fine in Chrome and IE, but in Firefox the links don't work at all. It seems like a Javascript issue, because if I comment out the lines referring to the smoothscroll .js file, then the links work fine.
The javascript that I'm using is this:
$('a[href*=#]').each(function() {
if($(this).attr('href').indexOf("#") == 0) {
$(this).click(function(e) {
e.preventDefault();
var targetOffset = $($(this).attr('href')).offset().top;
$('body').animate({scrollTop: targetOffset - 70}, 700);
});
}
});
What am I missing/doing wrong?
You can take a look at the actual site in question here.
Change your scrollTop animation to
$('body,html').animate({scrollTop: targetOffset - 70}, 700);
That should fix it in FF an also still work in Chrome.
update
Just in case you're asking why: I don't know for sure, so this is what I guess is happening: if you compare the HTML and BODY in FF and Chrome, in FF the size of the HTML-Element is as big as your rendered document. In Chrome your HTML-Element has the size of the Browser-Window and your BODY-Element is as big as your Page rendered. They render differently. FF scrolls the HTML inside its Window and Chrome scrolls the BODY inside the HTML.
As pointed out in other threads / comments (here for expample) this solution makes two calls. So you could put an if before scrolling or use document. The latter didn't do the trick for me, because it scrolled where I wanted it to scroll to, but didn't animate. Without if I personally just find it nicer to read and it shouldn't be such a big thing to call animate twice in that case. So the better solution would be detecting the browser and using either $('html') or $('body').