Tagged: automatic, automatically, categories, click, Down, Portfolio, scroll, Scrolling
-
AuthorPosts
-
April 21, 2020 at 2:07 pm #1205791
Hi! I got a lot of categories in my portfolio items. On desktop that’s fine, but on mobile when you click on a category it’s not clear that you have to scroll down to see the portfolio items. Is it possible that on mobile it automatically scrolls down to the grid content when you click on a category?
Thanks a lot for all the good support!
Lots of love!
April 26, 2020 at 5:56 pm #1207311Hey jannnnnneke,
Sorry for the late reply, and thanks for the link. This will smooth scroll down when a sort item is clicked on mobile.
Try adding this code to the end of your functions.php file in Appearance > Editor:function custom_script(){ ?> <script> (function ($) { $("#top.home .sort_width_container a").click(function() { var width = $(window).width() var elmnt = document.getElementById("socket"); if ((width <= 768)) { setTimeout(function () { elmnt.scrollIntoView({ behavior: 'smooth', block: 'start' }); }, 500); } else {} }); })(jQuery); </script> <?php } add_action('wp_footer', 'custom_script');
Then clear your browser cache and check.
Best regards,
MikeApril 29, 2020 at 9:23 am #1208089Hi! Thanks a lot! This is what I meant, perfect!
Is is possible to let it scroll smoothly? And when you click on ‘Nijmegen’ you see the last grid content in stead of the first. Is it possible to always show the first portfolio items?
Thank you very much!! Love your support!
April 29, 2020 at 12:15 pm #1208126Hi,
Thank you for the feedback, the script above is using thesmooth
option, it is looking “smooth” to me and not a “jump”, but if the “smooth” looks too fast try changing the number500
in the code to1500
and clear your site and browser cache a couple of times.
Unfortunately, I had to target the bottom of the container because the top was already in view and the scroll wouldn’t work. I could try to scroll by pixels, perhaps 400px?
If you would like to try this then please remove the above code so I can try again.Best regards,
MikeMay 12, 2020 at 4:52 pm #1212237Hi! When I change the number to 1500 it has some delay. On my iphone / Safari it’s a fast jump, when I make my Google Chrome internet browser smaller on my laptop, than it’s a smooth scroll.
Is it possible that the smooth scroll is not working on iphone safari?
Thanks!
May 13, 2020 at 12:43 pm #1212593Hi,
Apparently, this is a known iPhone issue, I found a possible solution but I can’t test it because I only have an Android.
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:body { overflow-y: scroll; -webkit-overflow-scrolling: touch; }
or
body { overflow-y: scroll !important; -webkit-overflow-scrolling: touch !important; }
Then clear your browser cache and check.
Best regards,
Mike -
AuthorPosts
- You must be logged in to reply to this topic.