How to integreate two codes with delay? - javascript

i have this code to animate my page with anchors
$('a[href*=#]').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
And this other code to make a delay when the link is presed
function delay (URL) {
setTimeout( function() { window.location = URL }, 500 );
}
So when i have a link with demo the first code runs perfeclty but when i add the delay like this <a onclick="delay ('#contentexpand-1')">demo</a> the first code doesn't work just jump to the anchor.
Please help me! thanks in advance :)

The problem is that your animation is attached to <a> tags. That does not get triggered when you simply set the window location. The solution is to trigger the animate both ways:
// Smoothly scroll to a tag defined by <a name="anchorName">
function scrollTo (anchorName) {
$('html, body').animate( {
scrollTop: $( "a[name=" + anchorName + "]" ).offset().top
}, 500);
}
// Make all # anchors scroll smoothly to their targets
$(document).ready(function(){
$('a[href*=#]').click(function() {
var anchorName = $(this).attr('href').substr(1); // strip off #
scrollTo(anchorName);
return false;
});
});
// Scroll to an anchor after half a second
function delay (anchorName) {
setTimeout( function() { scrollTo(anchorName); }, 500 );
}
I am not convinced that your code for finding the offset was right so I adjusted it a bit to make it clearer.
The tag you want to scroll to is defined like this:
<a name="demo">demo</a>
Then you can choose either behaviour:
scroll smoothly to demo immediately
<a onclick="delay ('demo')">scroll smoothly to demo after half second delay</a>

Related

scroll-to-top button on a mobile website

I'm trying to make the Scroll To Top button appear once the user started scrolling down, instead of it always being present, even when being at the top. Quick note, I barely have experience with JS, so I have no idea what I'm doing.
Anyway here is the page I'm having an error on: http://www.m.evans-carpentry.com/gallery/projects/
<script>
$(function() {
var $elem = $('#content');
$('#nav_up').fadeIn('slow');
$('#nav_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'1'});
});
$('#nav_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
}
);
$('#nav_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
}
);
});
</script>
Thanks!
you call jquery earlier announcements of jquery on line 30
<script>$('#nav Li: has (ul)').doubleTapToGo ();</script>
insert this line after the call jquery
Your code is too complex, try this:
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
".scrollToTop" is the thing to be clicked that scrolls back to the top of the page.

jQuery scroll does not scroll up

I have this code below and the DEMO fiddle.
jQuery(document).ready(function () {
$(window).scroll(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
});
I'm really confused why I can't scroll up? Anybody can explain to me why and please share some solutions you have.
Any help, is very appreciated.
Alright, this should do what you are asking for. I don't think it is very user friendly, but that is up to you.
Demo Fiddle
//this prevents the animate method from running multiple times.
var scrolling = false;
jQuery(document).ready(function () {
$(window).scroll(function () {
if ( $(window).scrollTop() <= 100 && scrolling === false) {
//set to true to prevent multiple scrolls
scrolling = true;
//run the animation
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000, function() {
//when animation is complete, set scrolling to false
scrolling = false;
});
}
});
});
You can't scroll up because your code is wrapped in the scroll() function so it basically locks its position every time you try and scroll with either the mouses scroll wheel or arrow keys. If you amend to the following then it will position itself accordingly when the page first loads.
jQuery(document).ready(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
Are you trying to have it animate when the link is clicked? If so you need to change your code:
jQuery(document).ready(function () {
$('a').click(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
});
I would probably add a class or ID value to your link so you can target that one specific link. The code above would apply to all links on your page...although right now there is only the one.
<h1>Scroll to the Content</h1>
jQuery(document).ready(function () {
$('.scrollToContent').click(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
});
I'm not sure if you will satisfied on this but i found something that can help a little on my problem.
jQuery(document).ready(function () {
$(this).bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 < 1) {
$('html, body').delay(200).animate({
scrollTop: $('#content').offset().top
}, 1000);
}
});
});
DEMO
No need to add the jquery functionality to achieve the requirement that has been asked. Please remove the Jquery code and run the code snippet provided in the fiddle. It is behaving as per the requirement.

Load page at specific point with jQuery (without animation!)

I want to load a page at a specific div on my page without animating to that point. Below is the code I'm using right now which animates to said div. I haven't been able to figure out how to do this same function without animation.
jQuery:
if(window.location.hash) {
var hash = window.location.hash;
var link = $("[href='"+ hash +"']");
if ( hash == "#specific-url" ) {
$('html, body').animate({
scrollTop: $("#specific-div").offset().top
}, 1000);
}
instead of this:
$('html, body').animate({
scrollTop: $("#specific-div").offset().top
}, 1000);
do this:
$(document).scrollTop($("#specific-div").offset().top);
In you code you were trying to animate the html,body of your document, so as you want to move at a specific location in your document i think you can directly set the .scrollTop() of your document the way i suggested to you above.
One way set animate time 0ms
if(window.location.hash) {
var hash = window.location.hash;
var link = $("[href='"+ hash +"']");
if ( hash == "#specific-url" ) {
$('html, body').animate({
scrollTop: $("#specific-div").offset().top
}, 0);
}
You can use
.scrollTop()
$(document).scrollTop($("#specific-div").offset().top);
.scrollIntoView()
$("#specific-div")[0].scrollIntoView(true);
or
document.getElementById(specific-div).scrollIntoView(true);

Best way to smooth scrolling to an internal link

I've searched and see lots of examples about this subject but I couldn't best way for me.
I'm just a bit familiar with JS and jQuery and I want to ask about smooth scrolling.
<a name="urunler"></a>
<ul>
<li>Plastik Panjur</li>
<li>Alüminyum (İthal / Yalıtımlı) Panjur</li>
<li>Otomatik Panjur</li>
</ul>
I've a navigation like this. This scrolls instatly. But I want to do it slowly. Which is the shortest & easiest way for this? I'm more familiar to JS and I don't want to download and use JS plugins.
I need to know full syntax with a click method for my links (they all have same class)
Should I remove href park from links?
Waiting for your help & still searching
EDIT!!!: In this situation, I need only one class. Is it possible to give this property for multiple classes?
function scrollToElement (selector) {
$('html, body').animate({
scrollTop: $(selector).offset().top
}, 2000);
};
$(document).on('click', 'a.uruna', function () {
scrollToElement($(this).attr('href'));
});
I've got ('click', 'a.uruna', function (), how can I insert another class here or should I just write:
$(document).on('click', 'a.uruna', function () {
scrollToElement($(this).attr('href'));
});
$(document).on('click', 'a.new', function () {
scrollToElement($(this).attr('href'));
});
It can also be done in pure CSS using the following in your Style Sheet.
html{
scroll-behavior: smooth
}
HTML:
<ul>
<li>Plastik Panjur</li>
[...]
</ul>
JS:
function scrollToElement (selector) {
$('html, body').animate({
scrollTop: $(selector).offset().top
}, 2000);
};
$(document).on('click', 'a.uruna', function () {
scrollToElement($(this).attr('href'));
});
or
function scrollToElement (obj) {
$('html, body').animate({
scrollTop: obj.offset().top
}, 2000);
};
$(document).on('click', 'a.uruna', function () {
scrollToElement($(this));
});
I noticed that with JohnJohnGa's answer you get a "flicker" (at least for Google Chrome) where the page immediately pops to the anchor href position and back again before it scrolls there smoothly. This might not be noticeable with a fast computer, but it was definitely noticeable on the one I was working on. To get around this, I did the following:
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
window.history.pushState(null, null, $($anchor.attr('href')).selector);
});
Note, this prevents the default event from firing and then uses window.history.pushState to mimic it. For old browsers that don't support pushState it will scroll to the correct location, but it just won't update the address location.
Living demo: http://jsfiddle.net/wVEAy/2/
Note that for this case you would need to have an element with the same id as the one specified in the href tag of your link:
function scrollToElement (selector) {
$('html, body').animate({
scrollTop: $(selector).offset().top
}, 2000);
};
$(document).on('click', 'a.uruna', function () {
scrollToElement($(this).attr('href'));
});

Anchor Onclick Division Highlight

I have made a simple webpage with lots of division. So to navigate direct to a division I have put a anchor on top like this :
First<br/>
Second<br/>
Third
And for smooth scrolling I have used javascript:
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
Now I want to add effect to the selected division. So when user click on an anchor, the page smoothly scrolls to the division and the selected division is highlighted for a second. Just like when we get any news in Stack Overflow inbox, and we click on it; the page lodes and the news item is highlighted for a short duration.
I want to do that thing to my page. Cause I'm having more then 18 divisions and they are all same.So it is necessary to differentiate the selected division.
Here is the example Fiddle : Fiddle For the Code
Any help would be appreciated. Thanks in advance.
In Your code $('html, body') returns 2 elements so animation will fire twice. If you include jquery.ui You will be able to do this:
$('a').click(function(){
var selector = $(this).attr('href');
$('html').animate({
scrollTop: $(selector).offset().top
}, 500,'',function(){
$(selector).effect("highlight", {}, 1000);
});
return false;
});
JsFiddle
This use opacity like example:
$('a').click(function(){
var el = $(this).attr('href');
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500, function(){
$(el).animate({'opacity':0.5},200, function(){ $(el).animate({'opacity':1}, 200)} );
});
return false;
});

Categories

Resources