Hello, I have a code that animates the site's anchor. When the user clicks the menu, it scrolls to the anchored location. But it's only working fluidly in Chrome and Opera. How can I adapt it to work in all browsers?
Animated Scrolling Code with anchors:
<script src="https://code.jquery.com/jquery-1.7.1.js"></script><scripttype="text/javascript">
if ($(window).width() > 640) {
$(document).on("click", 'a[href*="#"]', function(e) {
var target = $(this).attr("href"); //Get the target
target = target.substring(target.indexOf("#"), target.length);
var scrollToPosition = $(target).offset().top - 234;
$('html,body').animate({ 'scrollTop': scrollToPosition }, 600, function(){
window.location.hash = target;
});
});
$(document).ready(function() {
if(window.location.hash){
$("a[href*='"+window.location.hash+"']")
.attr("onclick","this.click()")
.trigger("click")
.removeAttr("onclick");
} });
}
if ($(window).width() < 640) {
$(document).on("click", 'a[href*="#"]', function(e) {
var target = $(this).attr("href"); //Get the target
target = target.substring(target.indexOf("#"), target.length);
var scrollToPosition = $(target).offset().top - 30;
$('html,body').animate({ 'scrollTop': scrollToPosition }, 600, function(){
window.location.hash = target;
});
});
$(document).ready(function() {
if(window.location.hash){
$("a[href*='"+window.location.hash+"']")
.attr("onclick","this.click()")
.trigger("click")
.removeAttr("onclick");
} });
}
</script>
Code that sets the on-screen menu:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><scripttype="text/javascript">
if ($(window).width() > 640) {
jQuery("document").ready(function($){
var offset = $('.menu-bar').offset().top;
var nav = $('.menu_component');
$(document).on('scroll', function () {
if (offset <= $(window).scrollTop()) {
nav.addClass('fixar');
} else {
nav.removeClass('fixar');
}
});
});
}
</script>
I feel that in addition to this error with the scroll animation up to the anchors, the menu is getting bogged down by fixing itself to the screen.
You can see the scripts running on the site: link
So I wonder if it's possible to make this work across browsers. Thank you!