Smooth scroll with anchor
-
@duezerouno whit this works for me:
<script>
jQuery(document).ready(function(){
jQuery('body').on('click', '.your-class', function(event) {
event.preventDefault();
var id = jQuery(this).attr('href');
jQuery('html, body').animate( { scrollTop: jQuery(id).offset().top }, 750 );
});
})
</script>@baumiao what's the difference in your snippet? it won't work :(
-
Hi Armin!
I am trying to use this snippet to scroll down in the page by clicking on a gridder item (icon).
jQuery(document).ready(function(){ jQuery('body').on('click', '#view-more', function(event) { event.preventDefault(); var id = jQuery(this).attr('href'); jQuery('html, body').animate( { scrollTop: jQuery(id).offset().top }, 750 ); }); })this is the error I get:
Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLDivElement.<anonymous> ((index):54)
at HTMLBodyElement.dispatch (jquery.js,qver=1.12.4.pagespeed.jm.pPCPAKkkss.js:1)
at HTMLBodyElement.r.handle (jquery.js,qver=1.12.4.pagespeed.jm.pPCPAKkkss.js:1)any idea? thank you!
What this codesnippet does is it needs an anchor element like
<a href="#target" id="view-more">Click me</a>and then it will scroll to the element<div id="target">This is where it scrolls to</div>If you just want to scroll down, let's say one window height then do:
jQuery(document).ready(function(){ jQuery('body').on('click', '#view-more', function(event) { event.preventDefault(); jQuery('html, body').animate( { scrollTop: window.innerHeight }, 750 ); }); }) -
Hello,
I'm not sure I understand how creating a smooth scroll with anchor.I also tried this code I found to transform all the links with "#".
But it don't works. Have you got an idea why ?(I put it between <script> on the <head> of custom css)
jQuery(document).ready(function(){ jQuery('a[href^="#"]').click(function(){ evt.preventDefault(); var target = jQuery(this).attr('href'); jQuery('html, body') .stop() .animate({scrollTop: jQuery(target).offset().top}, 1000 ); }); });Thank you !
-
Dear @cantoua
you need to call the function differently. not with document ready:
http://laytheme.com/documentation.html#custom-javascriptHope you will figure this out :-)
Best!
Marius
-
Thank You Marius.
I'm sorry, I already looked at this documentation but to be honest, I do not understand the logic.
I changed the line
jQuery(document).ready(function(){
for
window.laytheme.on("newpage", function(layoutObj, type, obj){
But I suppose it's not enough, it would be too simple :)The curious thing is that the code to return to top (scrollTop:0) or scroll the window height (the code armin posted just above), this works without problem with jQuery(document).ready(function(){
But I don't find a code to transform existing anchors to smooth scroll...
-
Dear @cantoua
Binding Click Events
Let's assume you gave multiple elements on multiple pages a class of clickme in the Gridder. You did that by right clicking the elements and clicking "Set HTML class and id".Now you want something to happen everytime someone clicks that element. The easiest way to attach an event handler function to .clickme is to use jQuery's "on". We are using a so called "delegated" event handler:
<script> jQuery(document).on("click", ".clickme", function(event) { console.log("yay!"); }); </script>If we would bind the .clickme elements directly like jQuery(".clickme").on("click", …), that wouldn't work because of the way Lay Theme is built as a JavaScript Single Page App.
You shouldn't wrap this into a "newpageshown" event, it should work just fine like that.
Can you try this one more time and if it does not work I will help you?
Best!
Marius
-
What this codesnippet does is it needs an anchor element like
<a href="#target" id="view-more">Click me</a>and then it will scroll to the element<div id="target">This is where it scrolls to</div>If you just want to scroll down, let's say one window height then do:
jQuery(document).ready(function(){ jQuery('body').on('click', '#view-more', function(event) { event.preventDefault(); jQuery('html, body').animate( { scrollTop: window.innerHeight }, 750 ); }); })Hello! So far I'm super happy with LAY Theme! It has everything what I need for making nice websites! :)
However, I'm afraid I didn’t get this part very well. So I copied the JS code and configured the link. Actually the anchoring works. The anchor link scrolls down to the target link. But when the “On Scroll Element Transitions” is activated, the on-scroll elements don't load. Only if I reload the page, the elements start loading.
The website. Klick on “Ausstellungen" to activate the anchor.
Basically I just deleted this part:
jQuery('html, body').animate( { scrollTop: window.innerHeight }, 750 );Maybe that's the mistake? Hope someone can help.
Thank you in advance!
All best
Aleks -
Dear @Nathalie
I think to achieve this is rather difficult if you are not very familiar with Javascript. I would as a developer to do it.
it will probably take a developer 4-5h. So for 200€ max you should have it.
Best!Marius
-
Hello @arminunruh! I'm still experiencing an issue with the smooth scroll. It works fine as long as "Activate on scroll element transitions" is deactivated. When I activate the function tho, the anchor doesn't work correctly. It scrolls down but there's no content showing.
"Activate on scroll element transitions" is such a nice effect. I wouldn’t like skipping it. :-(
When I add the trailing slash into the URL, it actually works. This doesn’t happen automatically. :-S
All best
Aleks -
do you have a link?
I also code custom websites or custom Lay features.
💿 Email me here: 💿
info@laytheme.com
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it