Smooth scroll with anchor

Nathalie

Hello !
I would like to make the smooth scroll effect work with anchor ! The anchor is working but no way to have a the animate scroll effect.

then i have add this in the <head> of custom css et js section :

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.

 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.

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

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?