Transition not working

The transition when clicking a link is only working with submenus, but transition should also work from links in the text.

Am I doing something wrong?

You see, when I click the menu link “Transformation des Geschäfts” it should transition to the position further down the page. It goes there, but without transition.

Also when I cklick on one of the listed links

Start Digital! Produkte & Services
Organisation „Digital Team“
Digital Branding. Markenbildung
Digitale Kommunikation. Experience Design

or

Digitalisierung der Geschäftsprozesse
Digital Service Management
Creating Competitive Advantages
Content Delivery & Management

it should smoothly transition to the position (on another page this time)

It also goes there, but not smoothly at all.

When I create submenu Links (as I’ve done) they behave as expected, as you can see here.
(this links are relativ and therefore only work on the page:

http://bim.demoaccount.ch/transformation-des-geschaefts

Any hints?

Hi,

It only works if your input starts with #, like you have in your submenu items. So only for same page scrolling I’m afraid.

However, you can install a custom JS plugin and re-add the code from the theme, but modified a bit:


jQuery(function($) {
	$('#site-navigation a[href*="#"], .button-wrapper a[href*="#"]').on('click',function (e) {
	    e.preventDefault();

	    var target = this.hash;
	    var $target = $(target);

		$('html, body').stop().animate({
		     'scrollTop': $target.offset().top - 70
		}, 900, 'swing');
	});
});

Thanks a lot!

Sorry, I didn’t see your answer before as I didn’t receive a notification, although I checked the box.

I use a child theme and therefore would prefer to be able to directly use the JavaScript.

Is this possible?

Does JavaScript somehow follow the template-hierarchy. So could I just replace the main.js lines 157 - 169 in a js/main.js file in the child theme?

Is there any other recommended way?

There’s no hierarchy for JS files.

What you want is to use wp_enqueue_script like it is done in the parent’s functions.php. So basically create a new .js file in your child with the code I posted and load that file.
Note that you need get_stylesheet_directory_uri() to get the file path in your child theme.

Thanks a lot Vlad.

Only one character changed in two places makes such a difference.

Sadly it seems to make a even bigger difference than expected:

The sticky menu suddenly is not sticky anymore and the absolut URL links on the menu (leading back to the home page) don’t work anymore: nothing happens when I click.

Removing the enqueue script from functions makes it work again.

Coorection: menue stays sticky now. This seems was a mistake as I firs calles my script

talon-main

Now I corrected that and the menu stays sticky, but the Link back still wont work:

I have no idea, what happens here, do you?

Here again the code.

in functions.php of the child theme:

// Smoothscroll
// adapted to work accross pages
// https://athemes.com/forums/topic/transition-not-working/#post-623621

wp_enqueue_script( 'talon-smoothscroll', get_stylesheet_directory_uri() . '/js/smoothscroll.js', array('jquery'), '', true );

and in /js/smoothscroll.js

jQuery(function($) {
	$('#site-navigation a[href*="#"], .button-wrapper a[href*="#"]').on('click',function (e) {
	    e.preventDefault();

	    var target = this.hash;
	    var $target = $(target);

		$('html, body').stop().animate({
		     'scrollTop': $target.offset().top - 70
		}, 900, 'swing');
	});
});

The link is like this:
http://staging.business-infrastructure.ch/de/home#transformation

but is somehow always messes up to become
http://staging.business-infrastructure.ch/de/home/#transformation

When I’m clicking on the link on the homepage, it scrolls smoothly.
If I’m on a different page and click: nothing happens.

If I copy the link it changes and doesn’t jump to the position on page (but at lest to the right page.

If I enter only http://staging.business-infrastructure.ch#transformationit changes as above…

Might be a problem with the way WordPress and or Polylang manages URLs.

Any hints or ideas might help.

Thanks

  1. Try the code like this please, it should prevent the error in moving from one page to the other:

jQuery(function($) {
  $('#site-navigation a[href*="#"], .button-wrapper a[href*="#"]').on('click',function (e) {
      var target = this.hash;
      var $target = $(target);
      if ( $target.length ) {
        e.preventDefault();
        $('html, body').stop().animate({
             'scrollTop': $target.offset().top - 70
        }, 900, 'swing');
      } 
  });
});

  1. The difference between home#transformation to home/#transformation doesn’t matter. The second is default for most browsers I think, that’s why it transforms it.
  2. I think moving to the wrong place on the page might be because of that flash before the slider completely loads. Try hiding the slider with CSS and see if it fixes the issue. I could reproduce it once, but can’t anymore.

works so far.
But also use now https://wordpress.org/plugins/menu-swapper/ to use different menus on home and inner pages