Inspiring

Answered

Anchor tags not working in some versions of Chrome

Forum|Forum|8 years ago
November 29, 2017
2 replies
13453 views

Hey all,

It was brought to my attention that anchor links have issues in certain versions of Chrome. I have your standard setup. Does anyone know a workaround? Below is a link to the page and here is my setup. It works for me but not everyone I've tested it on.

Link from menu:

<li><a class="btn-nav" href="#pluses">Features</a></li>

Section it links to:

Thank you

Here is the page:

starton - landing page template

This topic has been closed for replies.

Correct answer osgood_

kineticcreative123 wrote
Can I ask your suggestion on the video you helped me with on this page? On a small laptop the X to close out the video is sometimes behind the top bar with the logo. Is there a way to close the video by clicking on the page (or off the video) to close?

2 things you can apply to correct that issue.......

1. Add z-index: 10000; to the #page-overlay css selector: (that will ensure the overlay is always infront of the top menu bar).

#page-overlay{

position:fixed;

z-index: 10000;

left: 0px;

top: 0px;

height: 100%;

width:100%;

background: rgba(0, 0, 0, 0.7);

}

2. Also you can add #page-overlay to the jQuery script: (that will give the option of clicking on the overlay to close the modal window in addition to being able to click on the x).

Dont forget to add the comma infront of .close-lightbox (cant really see it too well below)

$('.close-lightbox, #page-overlay').css('cursor','pointer').click(function() {

O

osgood_

Legend

It's hard to tell what the geezer who produced that template was on when they were buidling it....

Try adding a simpler script to the page, directly before the closing </body> tag:

$(function() {

$('a[href*=#]:not([href=#])').click(function() {

if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

var target = $(this.hash);

target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

if (target.length) {

$('html,body').animate({

scrollTop: target.offset().top -80

}, 1000);

return false;

}

});

</script>

</body>

You should also move the <script> which is at the top of the page to join those at the bottom, put it after you have added the <script> above and then delete <script src="http://code.jquery.com/jquery-latest.min.js"></script> as you already have a link to the jQuery library further up (I didnt see that when helping you out earlier)

$(document).ready(function() {

$('#page-overlay, #lightbox-wrapper').hide();

$('.show_video').click(function(){

$('.view_video').html("<iframe width='640' height='390' src='https://www.youtube.com/embed/KizaRwJxEy0' frameborder='0' allowFullScreen>" + "</iframe>");

$('#page-overlay, #lightbox-wrapper').fadeIn();

});

$('.close-lightbox').css('cursor','pointer').click(function() {

$('.view_video').html('');

$('#page-overlay, #lightbox-wrapper').fadeOut();

});