I have some jquery for smooth scrolling:
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 1400);
});
Which works fine, except that I have some tabs on the page that use a hash link also. When you click each tab, the page scrolls to the top of the screen.
Is there a way to make this smooth scroll work, only when a specific anchor is added to the hash (like /#features) and not work when it is a hash only (like /#)
You can add a :not() selector to eliminate href="#" from triggering your click event.
$(document).on('click', 'a[href^="#"]:not([href=#])', function(event) {
console.log("Clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Hash Only
Anchor 1
Anchor 2
Related
Is it possible to create smooth scrolling behavior to an onpage div for a submit button?
I have something along these lines
<input type="submit" value="FREE QUOTE!" onclick="window.location.href = '#quote';">
That goes to the div just fine, but it jumps.
For the other anchor links on the page, I'm using a smooth-scrolling jQuery script which creates smooth scrolling for them:
$(document).on('click', 'a[href^="#"]', function (e) {
e.preventDefault();
$('html, body').stop().animate({
scrollTop: $($(this).attr('href')).offset().top
}, 1000, 'linear');
});
That's great, as expected, for normal anchors, but the button jumps.
I could of course style a normal anchor to have the look of this button but this breaks the design completely. If I use CSS scroll-behavior: smooth;, then I get a smooth scroll for this button, but there doesn't seem to be great support for this beyond recent browsers.
Is there a way to get a submit button to scroll smoothly to an onpage div? I don't mind if the scrolling for the button is a separate script/process to the vanilla anchors but would just like to get some smooth scrolling into this button.
You could create another event listener that targets something like a custom data attribute, eg: data-scroll:
<input type="submit" value="FREE QUOTE!" data-scroll="#quote" />
Here's a quick update to your JS:
function scrollTo($ele) {
$('html, body').stop().animate({
scrollTop: $ele.offset().top
}, 1000, 'linear');
}
$(document).on('click', 'a[href^="#"]', function (e) {
e.preventDefault();
const $ele = $($(this).attr('href'));
scrollTo($ele);
});
$(document).on('click', '[data-scroll]', function (e) {
e.preventDefault();
const $ele = $($(this).data('scroll'));
scrollTo($ele);
});
I'm currently trying to make a navigational menu that on click scrolls to a div positioned lower on the page. Initially it worked but as I added a CSS transition to highlight the text, the jQuery will no longer trigger the scrolling to happen upon clicking it.
$("#about, #about:hover").click(function() {
$('html,body').animate({
scrollTop: $("#box1").offset().top},
'slow');
});
The #about id is a part of the nav menu and will scroll to #box1 on click. I've tried adding the hover state to the selector, changing it to .trigger rather than .click but I'm not seeing a simple solution. I've recreated the event in Chrome, Safari, and using JSFiddle.
Is the JQuery conflicting with the transition, the hover state, or my code in general?
EDIT: It is working in the Fiddle example but the event still isn't happening when produced locally (everything is linked and correct with no errors in console).
Your JS code runs before the DOM is fully loaded.
Put the JS inside document.ready();:
$(document).ready(function () {
$("#about, #about:hover").click(function () {
$('html,body').animate({
scrollTop: $("#box1").offset().top
},
'slow');
});
$("#portfolio, #portfolio:hover").click(function () {
$('html,body').animate({
scrollTop: $("#box2").offset().top
},
'slow');
});
$("#social, #social:hover").click(function () {
$('html,body').animate({
scrollTop: $("#box3").offset().top
},
'slow');
});
$("#contact, #contact:hover").click(function () {
$('html,body').animate({
scrollTop: $("#box4").offset().top
},
'slow');
});
});
See updated JSFiddle
It doesn't work if your jQuery link and/or functions link are in the header.
It works for me if the js links are towards the end of your html like before the closing body tag.
I'm using a bunch of anchor tags for mobile browsing due to a very long page but when the anchor tag is clicked it adds it to the url. Here is a small mock,
page down
<span id="anchor"></span>
How can I retain the anchor functionality and prevent #anchor being added to the url?
Cheers
You could use scrollTop to achieve the same effect:
$('.js-hook--page-down').click(function (e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $("#anchor").offset().top - 200
}, 1500);
});
And the HTML:
<a class="js-hook--page-down">page down</a>
<span id="anchor"></span>
You need a new js hook for each of the page anchors though.
It's up to you how you'd want to go about it, but I would do this:
<script type="text/javascript">
$(window).on('hashchange', function(e){ // listen if hashtag is being added to the URL
location.href = location.href.replace(location.hash,"") //replace it with nothing
console.log("bam!"); //enjoy it
});
</script>
#DGibbs I took your code an modified it so that rather than having to write it out for each anchor on the page you can use this instead
$('.js-anchor').click(function (evt) {
evt.preventDefault();
var anchor = $(this).text();
$('html, body').animate({
scrollTop: $('#' + anchor).offset().top
}, 1500);
});
Maybe this will help someone else too. For reference the html looks like this
<a class="js-anchor">Top</a>
<span id="Top"></span>
Obviously with this code your anchor id must match the text inside the link for it to work
Add click event listener to your links and use preventDefault.
$('.mylink').click(function(event){
event.preventDefault();
});
This will stop the links from modifying the urls.
I'm using a WordPress plugin to display a list of locations and a map of those locations.
I created the following function so that a link will scroll to a map when a link is clicked.
jQuery(document).ready(function($) {
$(".wpgmp_location_title h3 a").click(function() {
$('html, body').animate({
scrollTop: $("#map-selected").offset().top
}, 2000);
});
});
However, the plugin automatically adds the following to each link:
href="javascript:open_current_location(marker2259map2)">
This link causes the map-marker to open, however, it appears to be preventing the jQuery function from scrolling the page to the top of the page.
Any ideas how to overcome this?
You need to cancel the default event inside your click handler:
jQuery(document).ready(function($) {
$(".wpgmp_location_title h3 a").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#map-selected").offset().top
}, 2000);
});
});
Fiddle
An approach could be to override the open_current_location() function.
Take a look at this example, you could also execute the scrolling and then the original behaviour of open_current_location()
How would I link to an anchor on another page but when the new page loads also scrollTo the anchor?
Below is the JQuery when my anchro link is on the same page I need to tweak it so that is also animate when the linked clicked
html:
<li>My Link</l1>
My JQuery:
$('.faq_section li a').click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top - 20
}, 600);
});
Page2.php:
<div id="about-us"></div>
You can do with following method
By clicking u can send some condition in URL and check that in jquery
E.g. xyz.com?p=scroll
Then in jquery on document.ready function check if 'p=scroll' is present by using indexOf. If yes then run your animate code (note. Above jquery code needs to be in output page)
Or try this http://webdeveloperswall.com/javascript/scrolling-to-different-areas-on-same-page