Smooth scroll with anchor

[arminunruh]

Hey as described here http://laytheme.com/documentation.html#binding-click-events
you can bind click events with a delegated event handler:

jQuery(document).ready(function(){
	jQuery('body').on('click', '.js-scrollTo', function(event) {
		event.preventDefault();
		var id = jQuery(this).attr('href');
		jQuery('html, body').animate( { scrollTop: jQuery(id).offset().top }, 750 );
	});
})

Also the jquery in wordpress uses jQuery instead of $
instead of return false I do event.preventDefault();
i think it does the same

[Nathalie]

@Nathalie said:

<a class="js-scrollTo" href="#page-1">Page1</a>

Work well ! Haha we will check again your documentation next time !
Thanks

[Nathalie]

This post is deleted!

[Nathalie]

Hey armin ! Have tried this code to make it sticky. The thing is that i want the text appear when i scroll .
i have tried to make it with .hide but it still appear at the first load.

<script>
jQuery(document).ready(function(){

 jQuery(".js-scrollTo").hide();

// fade in and out
jQuery(function () {
    
    
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 500) {
            jQuery('.js-scrollTo').fadeIn();
        } else {
            jQuery('.js-scrollTo').fadeOut();
        }
    });
    
      jQuery('body').on('click', '.js-scrollTo', function(event) {
    event.preventDefault();
    var id = jQuery(this).attr('href');
    jQuery('html, body').animate( { scrollTop: jQuery(id).offset().top }, 750 );
});


 
});

});

</script>

[arminunruh]

hey, please try Query(document).scrollTop() instead of window scrolltop

[Nathalie]

This has work ! i had to add " display:none" to my css class :) Thanks

[baumiao]

Hi! @Nathalie I tried your latest code and I added display:none to .js-scrollTo element but it's disappeared... otherwise if I not add display:none it remains always visible.

<script>
jQuery(document).ready(function(){
jQuery(".js-scrollTo").hide();
// fade in and out
jQuery(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 500) {
jQuery('.js-scrollTo').fadeIn();
} else {
jQuery('.js-scrollTo').fadeOut();
}
});
jQuery('body').on('click', '.js-scrollTo', function(event) {
event.preventDefault();
var id = jQuery(this).attr('href');
jQuery('html, body').animate( { scrollTop: jQuery(id).offset().top }, 750 );
});
});
});
</script>

.js-scrollTo{display:none !important;}

[duezerouno]

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!

[baumiao]

@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>

[duezerouno]

@baumiao what's the difference in your snippet? it won't work :(

[arminunruh]

@duezerouno

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 );
	});
})

[kan2a]

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 !

[mariusjopen]

Dear @cantoua
you need to call the function differently. not with document ready:
http://laytheme.com/documentation.html#custom-javascript

Hope you will figure this out :-)

Best!

Marius

[kan2a]

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...

[mariusjopen]

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

[Aleksandar]

@arminunruh

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

[mariusjopen]

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

[Aleksandar]

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

[arminunruh]

do you have a link?