I have the following code to enable smooth scrolling for on page navigation which I simply copy-pasted from somewhere I do not remember.
Since the smooth scrolling happens on an anchor tags click, it messes up Bootstrap Javascript for Tab which too utilizes anchor tags(This is what I have concluded, I hope I am correct).
$(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
}, 1000);
return false;
}
}
});
});
Now I do not understand this $('a[href*="#"]:not([href="#"])') part of the code, can somebody please put some light on what this is doing ? Also how do I fix this so that the above function fires only on On Page anchor clicks ?
a[href*="#"]:not([href="#"])
Above selector is gone target a tag with href="#smthing". So by default its gone effect bootstrap tab functionality.
Instead of that increase css specificity.
Use parent class like
$(function() {
$('.myParent 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
}, 1000);
return false;
}
}
});
});
Related
I've always used this script (found in CSS Tricks I think) to make smooth scrolling anchor links:
$(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
}, 1000);
return false;
}
}
});
});
It works like a charm! However, I just noticed that this scripts conflicts with how the Twitter Bootstrap carousel arrows work (since it uses anchors as well)
<a data-slide="prev" href="#mySlideshow" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
<a data-slide="next" href="#mySlideshow" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
I would like to know if there's a way I could modify the script to affect all anchor links BUT exclude the anchors inside any Bootstrap carousel.
Any ideas?
just change .not() argument like $('a[href*="#"]:not(.carousel-control)')
Here is the full example of your code
$(function() {
$('a[href*="#"]:not(.carousel-control)').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
}, 1000);
return false;
}
}
});
});
Play here if you want https://jsfiddle.net/eqaxxq5n/1/
But using like this a[href*="#"] might cause any issue again so it's better use any class or indicator to initialize your smooth effect like a.smoothClass[href*="#"] or something else.
Hope it make sense to you.
The following code I have used to apply smooth scrolling between menu links and content row containers. This seems to be working fine on all browsers except for Safari.
I understand I need to define 'html' and 'body' within the offset line, however, I am not sure if I have done this correctly. Would appreciate some help on this! Thanks.
$(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
}, 1000);
return false;
}
}
});
});
I'm trying to figure out how get the page automaticlly scroll to a specific div when the page has loaded. I have tried using the jQuery scroll function, but cant get it to work correctly. Any suggestions?
I did a quick search for you, would something like this fit your needs?
$(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
}, 1000);
return false;
}
}
});
});
Found here: https://css-tricks.com/snippets/jquery/smooth-scrolling/
You can test it out there as well!
You may try something like below in jQuery:-
$('html,body').animate({
scrollTop: $(".targetDiv").offset().top},
'slow');
I have a smooth scroll code which works great, the problem is it works too well. I have other elements that use "#" is the tag(example: but I don't want the tabs to be targeted by the smooth scroll. I have the following smooth scroll code:
jQuery(document).ready(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
}, 1000);
return false;
}
}
});
});
Is there anyway to modify this to only target the anchors for the page an not tab anchors
If you do not want to affect links with # as href value the syntax you should use looks like this:
$("[attribute!='value']")
So in your case you specify href as attribute and # as value.
$("a[href!='#']").on('click', function(e){
e.preventDefault();
//do stuff
});
I'm using the following Javascript on my web site to create a smooth scrolling effect when the user clicks the Contact Us link, to scroll to the contact information in the footer. I got this code snippet from a comment by Devin Sturgeon on the CSS-Tricks post on smooth scrolling. My only guess is that the issue arises from the fact that the anchor link is not in a set position, but in the fixed menu. According to the post, the snippet should work simply by cutting and pasting it in.
<script type="text/javascript">
$('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
}, 1000);
return false;
}
}
});
</script>
this line $('a[href*=#]:not([href=#])') is returning an empty set so your click handler is not being set on any dom element. The scrolling is being done by the browser using the old fashion anchor tag <a name="contact"> </a>.
#FakeRainBrigand is right, your document isn't fully loaded when you add your click handler. Just add it to the ready event.
$(document).ready(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 - 181
}, 1000);
return false;
}
}
});
});