Scroll to id javascript blocks :target CSS3 feature

JavaScript
1

i got

$('a[href*="#"]').on('click', function (e) {
	e.preventDefault();

	$('html, body').animate({
		scrollTop: $($(this).attr('href')).offset().top
	}, 500, 'linear');
});

And try to use :target and see that when remove above script then the :target works fine bu if set again is not work any idea why?

Thanks

2

It seems maybe because the .preventDefault();

3

Yep it is, it will stop the propagation of links, if mentioned

4

Is fine but how can fix that? Any other way? Try to search but got nothing about it. Every site must use scrollTop with click function and set preventDefault(); so there must be a way use both scroll smooth with target

5

There is a simple method, refer this link

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll

6

There also have prevent

      // Prevent default anchor click behavior
      event.preventDefault();

It is block the :target! What u mean ?

7

Console log this and check whether it returns the desired result,

Note: e.preventDefault() only stops the propaga5, means, it will stop the functionality of page refresh when the link is clicked but the function called inside will work, in your case check which I mentioned above, or else follow the method from the link i referred, it just stores the hash value, which is a convenient method i guess