My goal is to create anchor link with smooth scrolling to its destination and after it reaches it, toggle class to open accordion.
I have a hard time achieving a working result. Scroll code is here:
var $root = $('html, body');
$('.calendar a').click(function() {
$root.animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
I have no hash in my url.
How to include toggle in this scroll code?
Thanks!
There is an "completed" function callback you can stick at the end of the animation, like so:
var $root = $('html, body');
$('.calendar a').click(function() {
$root.animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500, function() {
//DO YOUR TOGGLE HERE
$('#target').toggleClass('myClass')
});
return false;
});
You can simply wait for the animate to complete using a jQuery promise and always. This works better than the animation callbacks (which do not fire if you are already at the final position)
JSFiddle http://jsfiddle.net/fb6yuf9k/1/
e.g.
var $root = $('html, body');
$('.calendar a').click(function () {
var $target = $($.attr(this, 'href'));
$root.animate({
scrollTop: $target.offset().top
}, 500).promise().always(function(){
$target.toggle();
});
return false;
});
For the specific website provided in comment, you want to toggle the element with toggle-content beneath the target element:
e.g.
var $root = $('html, body');
$('.calendar a').click(function () {
var $target = $($.attr(this, 'href'));
$root.animate({
scrollTop: $target.offset().top
}, 500).promise().always(function(){
$target.find('.toggle-content').toggle(); // or toggleClass etc
});
return false;
});
Related
hi i am working on a single page website, issue i am facing right now is when i click on anchor of menu, it goes few pixels bellow the required area as shown in pic
i want it like
i have tried this code but no success
Make anchor link go some pixels above where it's linked to
Javascript i am using is
$(document).on('click', 'a.page-scroll', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
i got the solution of issue just by subtracting the desired height form the actual height.
Complete and running code for me is following
$(document).on('click', 'a.page-scroll', function(event) {
var $anchor = $(this);
var desiredHeight = $(window).height() - 577;
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - desiredHeight
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
I have added a jQuery code to scroll on different divs using anchor tags, The scroll works but when it reaches to the target div it scrolls back to the top of the page. This is the code that I wrote
$('a[href^="#"]').click(function(e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').animate({
'scrollTop': $target.offset().top - 160
}, 1000).stop();
});
Any suggestions?
You could do this:
$(document).ready(function(){
$("a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
}
});
});
I'm building a single page website which uses smooth scrolling to anchors for navigation. I'm also trying to add a 'back to the top' button but can't seem to get the animation working (clicking the button doesn't do anything). I believe it's because I'm using two scrollTop functions. Is this correct and how can I solve this?
// Smooth scrolling for page anchors
$(document).ready(function () {
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').animate({
'scrollTop': $target.offset().top
}, 1000, 'swing');
});
});
// Sticky back to top button
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 600) {
$('.go-top').fadeIn("500");
} else {
$('.go-top').fadeOut("500");
}
});
$('.go-top').click(function () {
$('html, body').animate({
scrollTop: 0
}, 800);
return false;
});
});
Found the solution - I had to removed the second $(document).ready(function () { line of code.
I have the following jquery function which shows / hides content depending on the div that is selected...
jQuery(document).ready(function() {
jQuery('.showSingle').on('click', function () {
jQuery(this).addClass('selected').siblings().removeClass('selected');
jQuery('.targetDiv').hide();
var selector = '#div' + jQuery(this).data('target');
jQuery(selector).show();
location.hash = selector;
});
});
http://jsfiddle.net/W4Km8/7944/
I also have the following script taken from http://1stwebmagazine.com/jquery-scroll-to-anchor-point
$(document).ready(function(){
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top-40
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
I am trying to combine the 2 so that instead of jumping to the anchor it scrolls to it. Do I need to combine them or can they be made to work separate?
Looks like you can combine them easily enough, I've made it work with this jsfiddle: http://jsfiddle.net/9soxbhpj/
var target = jQuery(selector);
target.show()
$('html, body').stop().animate({
'scrollTop': target.offset().top-40
}, 900, 'swing', function () {
window.location.hash = selector;
});
You can add the scroll action in the same click call.
See the js:
jQuery(document).ready(function() {
jQuery('.showSingle').on('click', function () {
var _el = jQuery(this),
_target = jQuery('#div' + _el.data('target')),
_targetDiv = jQuery('.targetDiv');
_el.addClass('selected').siblings().removeClass('selected');
_targetDiv.hide();
_target.show();
// Scroll to object
$('html, body').animate({
scrollTop: _target.offset().top
}, 800);
});
});
Here is a working example.
I want to click the about section on my new website and when it scrolls down, instead of it sliding the about section up and aligning the top of the "about" section with the top of the screen, I want to align the bottom of the "about" section with the bottom of the screen.
I'm not sure if this has to be done with javascript or if it can be done with HTML. What are your thoughts?
Here is the function used to scroll to the top. ( Here Is A JSFiddle )
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('.page-scroll a').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
Do I just change it to:
//jQuery for page scrolling (to bottom) feature - requires jQuery Easing plugin
$(function() {
$('.page-scroll a').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollBottom: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
There is no scrollBottom, so you'll need to calculate the appropriate scrollTop:
$(function() {
$('.page-scroll a').bind('click', function(event) {
var $anchor = $(this);
var $section = $($anchor.attr('href'));
var scrollPos = $section.offset().top + $section.outerHeight() - $(window).height();
$('html, body').stop().animate({
scrollTop: scrollPos
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
http://jsfiddle.net/YjgdS/6/