I looked through much of the material via search.
first animation shows object that is off screen.
second animation scrolls to object using url.com/#bottom
$( "#contactbtn" ).click(function() {
$( "#contactform" ).show( "fast", function() {
// Animation complete.
});
});
$('a[href^="#"]').on('click', function(event) {
var target = $(this.href);
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
});
Each animation works great independently, but when combined they occur instantly and conflict causing
a none fluid transition to the element. Would like to know way of combining, perhaps by delay or queuing.
you can do something like this
var onClickFun = function() {
$('a[href^="#"]').on('click', animateFun());
}
function animateFun()(event) {
var target = $(this.href);
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
$( "#contactbtn" ).click(function() {
$( "#contactform" ).show( "fast", onClickFun());
});
Call second animation only after first is complete and give time lag according to your requirement.
You are so close - in fact, your comment // Animation complete is exactly where the next animation goes!
Many jQuery animations, including show() and animate(), accept a callback function as their last parameter. This lets you do something only once the animation is complete. For your example, if you wanted to show the contact form and then add the listener for anchor tags:
$( "#contactbtn" ).click(function() {
$( "#contactform" ).show( "fast", function() {
//* Right here we are in the callback to the .show() method.
//* This code below is only run once the element has been shown.
$('a[href^="#"]').on('click', function(event) {
event.preventDefault();
var target = $(this.href);
if ( target.length ) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
});
});
});
Alternatively, you can make scrollToAnchor its own function. This way you can keep your code tidy and just pass it as a callback. Callback functions receive arguments in the same order that they are passed. In this case, the event object will be passed to scrollToAnchor.
You can see how this code is both more readable and will be easier to maintain.
function scrollToAnchor(e) {
e.preventDefault();
var target = $(this.href);
if ( target.length ) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
}
$( "#contactbtn" ).click(function() {
$( "#contactform" ).show( "fast", function() {
//* Right here we are in the callback to the .show() method.
//* This code below is only run once the element has been shown.
$('a[href^="#"]').on('click', scrollToAnchor);
});
});
Related
I have a link link to test and when clicking on it, the page will instantly jump to the 'test'-content.
How can I add a transition when switching between this in-page links?
Thank you very much :D
EDIT:
It would be nice if I could use a css keyframe instead of the jquery animation.
Anyone a solution?
The fastest way would be load in jQuery and insert this snippet.
Step 1: Insert jQuery script tag before the closing body tag (</body>)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Step 2: Insert this snippet below
<script>
// Bind all a href clicks to this function
$(document).on('click', 'a', function(event){
// Prevent default events
event.preventDefault();
// Animate the body (html page) to scroll to the referring element
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 1000);
});
</script>
You can edit where it says 1000 to change the speed and you can also add or subtract scrollTop: $( $.attr(this, 'href') ).offset().top to get additional offset off your element.
Example: This will be 100 pixels above your element instead of exactly on top.
scrollTop: $( $.attr(this, 'href') ).offset().top - 100
I'm assuming you mean to smoothly scroll to the target instead of jumping there abruptly. If so, here's a way using javascript and jQuery.
$(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;
}
}
});
});
div {
min-height: 200vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
test
<div></div>
<div id="test">test</div>
Here is a jquery example:
$(document).on('click', 'a', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
});
and a fiddle: http://jsfiddle.net/9SDLw/.
Neither the code nor the fiddle are mine, it is an answer I found here Smooth scrolling when clicking an anchor link
This is not possible using CSS animation keyframes, the scroll position is not a CSS property that can be affected. You can change the position of the page scroll using Javascript or a number of javascript libraries (eg: jQuery).
I am new to web development and I am in a little trouble. I am using the following jQuery function in order to scroll the page for specific divs with internal links.
$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top-30
}, 1000);
}
});
The problem is that the function works also on other elements with internal links that should not have the scroll effect (accordion elements). The only way I can prevent this from happening is to write the same function for all the links that I want to apply the function to ("#link1", "#link2", "#link3", "#link4", ... , "#linkn").
I tried to use an array with the links and to use each value of the array in the function but I don't know how to write the loop.
Can you please help me?
$('a[href^="#"]')
This selector is saying "get all a tags that start with href=#". So the best idea would be to change this selector, to instead go by class names.
You could for example do this:
link
And js:
$('.autoscrollLink').on('click', function(event) {
var target = $( $(this).attr('href') );
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top-30
}, 1000);
}
});
I have a question that was answered before probably, but I was not able to make a code work.
I have an <a href="#page-contact">, and once the user click on it, it should scroll down (with animation) to a div with id "page-contact". It does take me to the form but with no animation
Here is the code:
<li class="">Contact</li>
<section id="page-contact" class="page-contact">
</section>
$('.page-contact').on('click', function(event) {
var target = $(this.href);
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#page-contact").offset().top
}, "slow");
}
});
Actually something really small..
$('.page-contact').on('click', function(event) {
//..
};
You connect this to a click on the target div, not the button.
Connect to event to a class that your button has and it will work.
$('#scrollButton').on('click', function(event) {
var target = $(this.hash);
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, "slow");
}
});
Fiddle to try out: http://jsfiddle.net/Macavity/xeqmnoLL/2/
$(this.href) not valid selector so target variable always empty, change var target = $(this.href); to var target = this.href; to get link
$(this.href) seletor work as.
$("http://stackoverflow.com/questions/29515247/scrolling-to-a-div-using-jquery#29515468")
> Object[]
$('.page-contact').on('click', function(event) {
var target = this.href;
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#page-contact").offset().top
}, "slow");
}
});
Your selector is wrong, change to this:
$('a[href="#page-contact"]').on('click', function(event) {
var target = this.getAttribute("href");
if($(target).length) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#page-contact").offset().top
}, "slow");
}
});
One reason is href property returns the absolute path of the anchor, i.e. "http://www.example.com#hash". As jQuery can't find the target element the length of the collection is 0 and the if block is not executed.
Either use this.getAttribute('href') which returns the original href attribute or the hash property that returns hash segment of the href attribute instead of the href property.
var target = $(this.hash); // $('#page-contact')
Also note that your click handler is bound to the target section element not the a element.
$('li a').on('click', function(event) {
var target = $(this.hash);
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, "slow");
}
});
in an project I do use mmenu first time. It works as expected but there is one thing I would love to have working, but it still isn't :/
Here's the URL: http://1pager.gut-entwickelt.de/
What I would love to see: After selecting an menu-point, it shouldn't scroll within milliseconds. It should wait till the menu is closed, then start scrolling.
Thatfor I added this script-part:
Me.mobileMenu.mmenu({
zposition: "front",
onClick: {
preventDefault: true,
setSelected : false
}
});
Me.mobileMenu
.find('a')
.on(
'click',
function() {
var href = $(this).attr('href');
if (Me.mobileMenu.hasClass('mm-opened')) {
Me.mobileMenu
.off('closed.mm')
.one(
'closed.mm',
function() {
setTimeout(
function(){
$('html, body').animate({
scrollTop: $(href).offset().top
});
},
1000
);
return false;
}
);
} else {
setTimeout(
function(){
$('html, body').animate({
scrollTop: $(href).offset().top
});
},
1000
);
}
return false;
}
);
This seems to work here: http://mmenu.frebsite.nl/examples/responsive/index.html
But on that page it don't... any ideas?
Regards,
Oliver Lippert
The "closed" event is triggered when the menu finished closing, so you shouldn't need an extra timeout.
Have a look at this example, it's a bit more straightforward:
http://mmenu.frebsite.nl/mmenu/demo/onepage.html
Extended to Fred's reply I had another JS-code for doing the scroll. After disabling it, now the menu closes first, and the Scroll starts later.
I have this code so that when a URL is clicked, the view will be scrolled to that particular div (same page) smoothly.
However, I have encountered something buggy.
So let say I clicked the URL, and it is now scrolling smoothly to the bottom of the page. However, when I tried to use my mouse wheel to stop the smooth scrolling but it didn't work. Instead, it gives me that kinda buggy look.
Here's the code
Please advice
<script>
$('a').click(function(e){
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 1500);
return false;
});
</script>
Add event handlers to the window for wheel and mousewheel events, and in their handlers call $("html, body").stop()
Try this
<script>
$('html, body').bind('mousewheel', function(e){
$(this).stop();
});
$('a').click(function(e){
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 1500);
return false;
});
</script>
Maybe the issue is that you are not using document ready function.
Try this:
<script>
$(document).ready(function () { // <-- this
$('a').click(function(e){
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 1500);
return false;
});
});
</script>