Smooth scroll a submit button to an onpage div - javascript

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);
});

Related

Disable Smooth Scrolling on Non-Anchor Hash Link?

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

jQuery not triggering event in hover state

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.

CSS transitions playing too many times; Added via jQuery

So I have 2 divs, one of them being hidden on load using jQuery .hide()
One div is id is menus and the other is prix-fix-menu
I want to fade and slide between the 2 with button clicks. Its a restaurant menu, so I want to smoothly scroll to the different sections of the menu (such as apps, entrees, dessert etc.) but then if the user clicks the Prix Fix button, the page will fade and slide out the regular menu and fade and slide in the Prix Fix menu. If they have the Prix Fix menu open, I want any of the links OTHER THAN the Prix Fix link, to take the user back to the main menu page, sliding out the Prix Fix and sliding in the regular menu.
To accomplish this, Im just dynamically adding and removing classes from Animate.css. The problem is that the animations keep playing more than once (even though Im using .one() method) . I believe it may be because Im listening to the animationend event to then play another animation causing a loop. But whats weird is that it plays it exactly 4 times, not infinitely.
Here's the javascript:
$('#prix-fix-menu, #catering-menu').hide();
$("a[href='#prix-fix']").on('click', function () {
$('#menus').removeClass().addClass('animated fadeOutLeft');
$('#menus').one('animationend webkitAnimationEnd', function () {
$("#menus").hide();
$('#prix-fix-menu').show().removeClass().addClass('animated fadeInRight');
});
});
$("a:not(a[href='#prix-fix'])").on('click', function () {
$('#prix-fix-menu').removeClass().addClass('animated fadeOutRight');
$('#prix-fix-menu').one('animationend webkitAnimationEnd', function () {
$("#prix-fix-menu").hide();
$('#menus').show().removeClass().addClass('animated fadeInLeft');
});
});
I also have a smooth scroll script (positioned after the previous script in at the bottom of the tag) working with the anchor links as well. Putting this here just in-case this is whats causing the problem even though I dont think so:
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
If more information like CSS or HTML are needed then let me know and Ill added but there's quite a lot of markup for the menu because of all the items.
Link to the live project: Project
Thanks in advance!
Following this CODE1
CODE1
$('#prix-fix-menu, #catering-menu').hide();
$("a[href='#prix-fix']").on('click', function () {
//add this line
$('#prix-fix-menu').unbind('animationend webkitAnimationEnd');
$('#menus').removeClass().addClass('animated fadeOutLeft');
$('#menus').one('animationend webkitAnimationEnd', function () {
$("#menus").hide();
$('#prix-fix-menu').show().removeClass().addClass('animated fadeInRight');
});
});
$("a:not(a[href='#prix-fix'])").on('click', function () {
//add this line
$('#menus').unbind('animationend webkitAnimationEnd');
$('#prix-fix-menu').removeClass().addClass('animated fadeOutRight');
$('#prix-fix-menu').one('animationend webkitAnimationEnd', function () {
$("#prix-fix-menu").hide();
$('#menus').show().removeClass().addClass('animated fadeInLeft');
});
});
your code may be caused multiple binding animationend webkitAnimationEnd, so animationend webkitAnimationEnd unbind before start animation.
WHY
Problem is animationend webkitAnimationEnd. animationend and webkitAnimationEnd is different event.
In your case, you tried to add two event at the same time. so another event leaves after trigger animation end. You can easily understand about this situation. Try following CODE2.
CODE2
$('#prix-fix-menu, #catering-menu').hide();
$("a[href='#prix-fix']").on('click', function () {
$('#menus').removeClass().addClass('animated fadeOutLeft');
$('#menus').one('webkitAnimationEnd', function () {
$("#menus").hide();
$('#prix-fix-menu').show().removeClass().addClass('animated fadeInRight');
});
});
$("a:not(a[href='#prix-fix'])").on('click', function () {
$('#prix-fix-menu').removeClass().addClass('animated fadeOutRight');
$('#prix-fix-menu').one('webkitAnimationEnd', function () {
$("#prix-fix-menu").hide();
$('#menus').show().removeClass().addClass('animated fadeInLeft');
});
});
In CODE2, remove only animationend event. It seems to work fine. But it has still problem when you click repeatedly same button. To work CODE2, you have to filter for user to click repeatedly same button using if-statement.

JavaScript inside the A HREF keeps jQuery function from working

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()

jQuery stopPropagation - function fire up again

can you tell me how to stop function propagation. I need to fire up some function again after first click action. I using scrollTo jquery plugin for scroll my content and when i click in my 'fire' button content scroll nicely, but i can't do this again... Thx 4 help.
This is my function:
$('.arrow_down').bind('click', function(event){
$('.recipe_single_view_right_panel').scrollTo({top:'280px', left:'0'}, 800 );
event.stopPropagation();
});
You will not need to use a big, feature-rich plugin to achieve that.
All you need to do is to alter the scrollTop - property of the wrapping element. I created a fiddle with a simple example: http://jsfiddle.net/k9bdY/
The wrapping element is set to overflow: scroll, animating the scrolling-position on click is fairly simple then when using jQuery:
$('.scroll-btn').on("click", function(e){
e.preventDefault();
$('#wrapper').animate({
scrollTop: "+=200px"
}, 800);
});​

Categories