0
Hello I have a code that makes an animation in the anchorage of the site. When the user clicks on the menu, he scrolls to the anchored location. But it’s only working smoothly 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>
<script type="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 Setting Menu on the Screen:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="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 animation of scroll up to the anchors, the menu is giving a bug while fixing on the screen.
You can see the working scripts on the website: https://sienpro.catalao.ufg.br/
Then I would like to know if it is possible to make it work in the various browsers. I thank you in advance!
when you put the class
fixed
andfixar
also add amargin-top
in class.news-black
, to compensate for the removal of the blocks.menu_component
and.components_group_component
I took a test here it seems like your problem is this, how do you change theposition
forfixed
it loses the height of those blocks and the rest of the page goes up, at least here in mozila apparently is just that, the script is right, although you get the same effect usingposition: sticky;
that I find better and more economical– Hebert Lima
How do I use this Sticky position?
– Lucas Shimura
resolvi putting the margin-top. it seems q this effect is difficult with regards to compatibility
– Lucas Shimura
here is an explanation: https://developers.google.com/web/updates/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit I need to add a complete reply?
– Hebert Lima