Как заставить срабатывать href#?

146

28 мая 2019, 08:30

Я использую якорь, и хочу иметь подсветку когда на якорь нажимают. Если скрипт отключить то подсветка срабатывает.

я так понимаю что это из за того что не добавляется в браузере /site.com/#test как включить это добавление?

$('a[href^="#"]').click(function () {
var target = $(this).attr('href');
$('html, body').animate({scrollTop: $(target).offset().top - 250 }, 800);
return false;
});

http://jsfiddle.net/j9knzuh1/40/

Answer 1

Используйте window.location.hash. Для того чтобы браузер "не прыгал" при нажатии по ссылке используйте preventDefault();

$('a[href^="#"]').click(function (e) { 
e.preventDefault(); 
var target = $(this).attr('href'); 
 
$('html, body').animate({scrollTop: $(target).offset().top - 250 }, 800, function() { 
//Animation complete 
 window.location.hash=target; 
  }); 
  
 
return false; 
});

.elem:target { 
	-webkit-animation: highlight 3s ease-out; 
			animation: highlight 3s ease-out; 
} 
@-webkit-keyframes highlight { 
	0% { padding: 7px 0px 9px 0px; background-color: #ffe60b; } 
    100% { background-color: #FFFFFF; } 
} 
@keyframes highlight { 
	0% { padding: 7px 0px 9px 0px;   background: #ffd2a3;} 
 100% { background-color: #FFFFFF; } 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> 
<a href="#test">Ссыль</a> 
<br><br><br><br><br><br><br> 
 
<div id="test" class="elem" style="background:red">#test</div> 
 
<br><br><br><br><br><br><br><br> 
<br><br><br><br><br> 
 
 
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

UPD

$('a[href^="#"]').click(function () {
var target = $(this).attr('href');
 $('html, body').animate({scrollTop: $(target).offset().top - 250 }, 800);
  setTimeout(function(){
    window.location.hash=target;
  },100);

return false;
});