Hello,
Thank You for your Patience!
The data-scrollto is used for Independent Scroll To Links. However, data-href is used only inside a One Page Menu. According to your Usage Requirements, you should use the data-scrollto Functionality.
Please use the following code:
- [Section title](page.html#section1)
and then use the following code to update the linkScroll: function() Function Block entirely in the js/functions.js File, so that the Browser Address can be changed:
linkScroll: function(){
$("a[data-scrollto]").click(function(){
var element = $(this),
divScrollToAnchor = element.attr('data-scrollto'),
divScrollSpeed = element.attr('data-speed'),
divScrollOffset = element.attr('data-offset'),
divScrollEasing = element.attr('data-easing'),
divScrollHighlight = element.attr('data-highlight');
if( !divScrollSpeed ) { divScrollSpeed = 750; }
if( !divScrollOffset ) { divScrollOffset = SEMICOLON.initialize.topScrollOffset(); }
if( !divScrollEasing ) { divScrollEasing = 'easeOutQuad'; }
$('html,body').stop(true).animate({
'scrollTop': $( divScrollToAnchor ).offset().top - Number(divScrollOffset)
}, Number(divScrollSpeed), divScrollEasing, function(){
if( divScrollHighlight ) {
if( $(divScrollToAnchor).find('.highlight-me').length > 0 ) {
$(divScrollToAnchor).find('.highlight-me').animate({'backgroundColor': divScrollHighlight}, 300);
var t = setTimeout( function(){ $(divScrollToAnchor).find('.highlight-me').animate({'backgroundColor': 'transparent'}, 300); }, 500 );
} else {
$(divScrollToAnchor).animate({'backgroundColor': divScrollHighlight}, 300);
var t = setTimeout( function(){ $(divScrollToAnchor).animate({'backgroundColor': 'transparent'}, 300); }, 500 );
}
}
if( history.pushState ) {
history.pushState( null, null, divScrollToAnchor );
} else {
window.location.hash = divScrollToAnchor;
}
});
return false;
});
},
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.
