Code:
<div>
Back
<div class="outer"></div>
Next
</div>
<div>
Back
<div class="outer"></div>
Next
</div>
jQuery code:
$('.next').click(function() {
$('.next').prev().animate({
scrollLeft: '+=150'
}, 200);
});
$('.back').click(function() {
$('.back').next().animate({
scrollLeft: '-=150'
}, 200);
});
Error:
Basically I have more codes with the same classes as above and I want to scroll the code which is clicked. But the code written above scroll all the ".outer" on the page. Each set of the code is in different div. The inside material of the "outer" isn't provided which is scroll able.
You need to execute the code using current element context i.e. this. Also animate the siblings of parent element so traverse up using $(this).closest('div') then use .prev() or next()
$(function() {
$('.next').click(function() {
$(this).closest('div').prev().animate({
scrollLeft: '+=150'
}, 200);
});
$('.back').click(function() {
$(this).closest('div').next().animate({
scrollLeft: '-=150'
}, 200);
});
});
Simple Use $(this) for get current Object
$('.next').click(function () {
$(this).prev().animate({ scrollLeft: '+=150'}, 200);
});
$('.back').click(function () {
$(this).next().animate({ scrollLeft: '-=150'}, 200);
});
Don't forget to wrap your code in a document ready function.
<script>
$(document).ready(function() {
$('.next').click(function () {
$(this).prev().animate({ scrollLeft: '+=150'}, 200);
});
$('.back').click(function () {
$(this).next().animate({ scrollLeft: '-=150'}, 200);
});
});
</script>
Also using the on method is better for event binding, e.g.
<script>
$(document).ready(function() {
$('.next').on('click', function () {
$(this).prev().animate({ scrollLeft: '+=150'}, 200);
});
$('.back').on('click', function () {
$(this).next().animate({ scrollLeft: '-=150'}, 200);
});
});
</script>
Edit:
As #GuruprasadRao pointed out, I'm assuming you are already but make sure you're using a HTML5 doctype otherwise you'll need to add type="text/javascript" to your script tag.
Related
I am trying to make a smooth scroll effect for my page using jQuery. Does anyone know why this doesn't work?
$(document).ready(function() {
$("#button").click(function() {
$(document).animate({
scrollTop: $("#endpoint").offset().top
}, 1100);
});
});
The JSFiddle -> https://jsfiddle.net/1hm56tms/2/
You should animate the Body and not the document.
$("#button").click(function() {
$("body").animate({
scrollTop: $("#endpoint").offset().top
}, 1100);
});
jsfiddle
You need to change document to body or html,
jsfiddle
$(document).ready(function() {
$("#button").click(function() {
$('html, body').animate({
scrollTop: $('#endpoint').offset().top}
, 1000);
});
});
I have this code
$(document).ready(function () {
$('.click_to_hide').click(function () {
var visible = $('.hide_on_click').is(":visible");
$('.hide_on_click').slideToggle(500);
if (!visible) {
$('html, body').animate({
scrollTop: $('.hide_on_click').offset().top
}, 500);
}
});
});
I am trying to change it to use only animate, but nothing I tried worked so far.
How can I revise the code to only use animate instead of the way it is now?
Fiddle Demo: http://fiddle.jshell.net/YFR2e/3/
So I have the following code:
$("#btn1").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#div").offset().top
}, 2000);
$("#div").addClass("flash");
setTimeout( function(){
$("#div").removeClass("flash"), 1000;
}, 1000);
});
When I click on the button it will scroll down to the div and flash its color (flash class). But what if the div is at the bottom of the page? I need the ode above to be changed so that the scrollTop is executed first AND is finished and then execute the next piece of code (the addClass and the setTimeout function). I assume I need to add a delay? Or something that checks whether the function is complete and if so, start the next one?
I think what you're looking for is animation callback. It's the forth parameter to the .animate() method: http://api.jquery.com/animate/
So in your case it would look like this:
$("#btn1").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#div").offset().top
},
2000,
'swing',
function () {
$("#div").addClass("flash");
setTimeout( function(){
$("#div").removeClass("flash"), 1000;
}, 1000);
});
});
Btw. it's a good practice to cache a jQuery selectors for optimisation (jQuery won't be searching the DOM for the queried nodes, and running the its constructor function each time).
I also refactored this code a bit for readability and to separate the flashing functionality, so you can either use it conveniently in such callbacks (in which case the function will get the animated element as this object, or just run it directly, passing it any jQuery element (e.g. flash($('.anything')))
$("#btn1").click(function(event) {
event.preventDefault();
$div = $('#div');
$('html, body').animate({
scrollTop: $div.offset().top
}, 2000, 'swing', flashElement});
});
function flashElement(element) {
element = element || this;
element.addClass("flash");
setTimeout( function(){
element.removeClass("flash"), 1000;
}, 1000);
}
You just need a callback...
$("#btn1").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#div").offset().top
}, 2000, function(){
$("#div").addClass("flash");
setTimeout( function(){
$("#div").removeClass("flash"), 1000;
}, 1000);
});
});
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.
$(function () {
$('#button').click(function () {
$('html, body').animate({
scrollTop: $(document).height()
},
400);
return false;
});
$('#top').click(function () {
$('html, body').animate({
scrollTop: '0px'
},
400);
return false;
});
});
I'm using that code to scroll to the bottom/top of the page. I'm wondering if there is a better way to write that? I'm new to jquery so I'm not sure but I've heard using event.preventDefault() may be better instead of return false? If so, where would I insert that?
How about just using a ternary to select the scroll? eg
$(function () {
$('#button').add('#top').click(function () {
$('html, body').animate({
scrollTop : ((this.id=='button') ? $(document).height() : '0px')
},
400);
return false;
});
});
JSFiddle for this code here
You could make this better by adding a class eg 'navButton' to each of these buttons and then using that as the selection ie $('.navButton') - This will eliminate the .add() call.
Also I'd recommend giving the bottom button the id bottom rather than button :) eg
$(function () {
$('.navButton').click(function () {
$('html, body').animate({
scrollTop : ((this.id=='bottom') ? $(document).height() : '0px')
},
400);
});
});
Sure:
$(function() {
var map = {'#button': $(document).height, '#top': '0px'};
jQuery.each(map, function(k, v) {
$(k).click(function() {
$(document.body).animate({
scrollTop:(typeof v === 'function') ? v() : v
},
400);
});
});
});
According to jQuery manual return false and preventDefault does different things:
Example: Cancel a default action and prevent it from bubbling up, return false:
$("a").live("click", function() { return false; })
Example: To cancel only the default action by using the preventDefault method.
$("a").live("click", function(event){
event.preventDefault();
});
So preventDefault is more limited.
Using a specialized plugin jquery.scrollTo.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.11/jquery.scrollTo.min.js"></script>
Makes code nice and easy
$(function() {
$('#button').click(function() {
$.scrollTo('max', 400);
return false;
});
$('#top').click(function() {
$.scrollTo(0, 400);
return false;
});
});
Demo: http://jsfiddle.net/disfated/mkZp3/
Also if you want a more flexible code, you could do something like
$(function() {
$(document).on('click', '[data-scroll]', function(e) {
e.preventDefault();
$.scrollTo($(this).data('scroll'), jQuery.fx.speeds._default);
});
});
Then, define scroll behaviour directly in html, example
<button data-scroll="max">scroll to page bottom</button>
<button data-scroll="0">scroll to page top</button>
<button data-scroll="#my_selector">scroll to #my_selector element</button>
Demo: http://jsfiddle.net/disfated/Sj8m7/