Scroll to specific object on click
-
Hi !
I've been using Lay Theme since a bit, and I'm currently trying to push a little further my website.
I basically try to create a scroll to specific object on lick function (combining with the click events, to have scroll on click with all objects with a specific class)
I've been looking at the guidelines in the "custom script" documentation section, especially the "Binding Click Events", but I tried and seems that it's not working (nothing in the log when clicking...)
How could we apply that short simple code ? (combining the click events with a scroll to function)<script>
$("button").click(function() {
$('html,body').animate({
scrollTop: $(".second").offset().top},
'slow');
});
</script>Thank you very much!
Thibault
-
arminunruh Global Moderatorwrote on Apr 26, 2016, 10:16 AM last edited by arminunruh Apr 26, 2016, 6:18 AM
Hey thibault, you are binding your click event directly to an element. But you need to bind it in a delegated way like i explain in the documentation:
<script>
jQuery("body").on("click", "button", function(event) {
console.log("yay!");
});
</script>This code will console log yay everytime you click a dom element "button". If u want to bind the click to an element that has the class button you should use ".button" instead of "button"
-
Hey! I tried exactly with the code you suggested in the documentation
<script>
jQuery("body").on("click", ".clickme", function(event) {
console.log("yay!");
});
</script>and gave a class clickme to an image (with the little class button)
But nothing appears in the log when I click on it... it's in a project page, I'm using arrows (previous/next) on that page also. The mouse pointer doesn't change, and nothing appears in the logs... I tried on a clickable object (a button) still nothing.What do you think that could be ? I tried the other script you suggested in the doc Newpage Events, and some stuffs appear in the log that time.
Thnks !
-
Hey can u send me your laytheme website address and wordpress login please? You can send that via chat or email to: armin.unruh@gmail.com
Please also provide a link to this forum thread so that I remember what the problem is. -
ThibaultDuchesnewrote on Apr 26, 2016, 12:41 PM last edited by ThibaultDuchesne Apr 26, 2016, 8:43 AM
I actually just solved it ! I entered the scripts in the Top and not in the Head now it's working fine ! Thanks
-
@ThibaultDuchesne
Hey Thibault:
could you explain how you made it happen?
Need custom programming for your Lay Theme site?
I regularly add new features to Lay Theme for free, based on user feedback. But if you or your client need something more specific, I’m happy to offer custom paid programming tailored to your project.
Email info@laytheme.com with the subject "Custom paid programming for Lay Theme" and a short description of what you need — I’ll reply with a cost estimate.
Custom features I build often make it into future Lay Theme updates, so your idea might benefit the whole community.
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