Anchor links not working

2 replies · opened Jun 27, 2017

LlivemusicprosJun 27, 2017

Hello,

If I have a div labeled with an id like this: <div id="location1">

And I create a link from another page like this: link text

Or I create a link from the same page like this: link text

The anchor links do not work: they take me to the page, but the location is way, way off. I don't have duplicate id names. I've tried moving the id names to the very top of major section of the page. No matter what, the anchor links do not work properly.

What am I missing? Thanks.

SSemicolon WebSTAFFJun 28, 2017

Hello,

Actually this is not an Error but the Default Functionality of the Browsers. So, you will need to add some extra codes to make this work and align the Section properly based on the Sticky Header and Offset. Consider adding the following JS Code at the bottom of the Page just after the js/functions.js JS File Linking:

jQuery(document).ready( function(){
	setTimeout(function() {
		if (location.hash) {
			window.scrollTo(0, 0);
		}
	}, 1);
});

jQuery(window).on('load', function(){
	var divScrollToAnchor = window.location.hash;

	if( typeof divScrollToAnchor !== 'undefined' ) {
		var getOffset = $( divScrollToAnchor ).attr('data-offset');

		if( getOffset ) {
			scrollOffset = Number( getOffset );
		} else {
			scrollOffset = 70;
		}

		var t = setTimeout( function(){
			$('html,body').stop(true).animate({
				'scrollTop': $( divScrollToAnchor ).offset().top - scrollOffset
			}, 700, 'easeOutQuad');
		}, 1000);
	}
});

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

LlivemusicprosJun 30, 2017

Thank you! Very nice solution.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard