I have a div whose id is 'regOrg' and initially it is hidden using a css
display: none;
The link to be clicked has an id of back.
On clicking a link I want it to show and smooth scroll down to it (the div regOrg).
This is the code i have:
function goBack() {
$("#regOrg").show();
$("#back").click(function() {
$('html, body').animate({
scrollBottom: $("#regOrg").offset().bottom
}, 2000);
});
}
I call the function goback() on the onclick event of the hyperlink.
However it doesn't work. It only shows the div but doesn't scroll to it.
You are not executing the scroll. You are just binding it to the click event.
Try:
function goBack() {
$("#regOrg").show();
$('html, body').animate({
scrollBottom: $("#regOrg").offset().bottom + 'px'},2000);
}
EDIT: I added the missing "px" to it.
Try with something like this :
function goBack() {
$("#regOrg").show();
var myDiv = $('#regOrg');
var height = myDiv[0].scrollHeight;
myDiv.scrollTop(height);
}
It works on jsfiddle
You could take a look at this post too.
Related
I have a small problem. To scroll child in the begging of parent. After
click button 'BOOK NOW' this block must be scroll at the begging of popup
I try something like this
jQuery('.booking-now').each(function(){
jQuery(this).click(function(e){
var btn = jQuery(this);
var btnParent = btn.closest('.sidebar-wrapper');
var btnParentOffset = 0;
function getParentOffset() {
return btnParentOffset = btnParent.offset().top
}
getParentOffset();
console.log(btnParentOffset);
jQuery('.events-booking-custom').animate({
scrollTop: btnParentOffset
}, 500);
})
})
Well firstly, it looks like you are trying to scroll the .events-booking-custom instead of the HTML/body:
$('html, body').animate({
scrollTop: buttonParentOffset
}, 500);
Secondly, it doesn't look like you are preventing the default action for the button:
e.preventDefault();
I'm not sure what's going wrong though. Do you have a sample of the HTML or can you create a JSFiddle?
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.
My page shows a div after a radio button from id="yourgoal" is clicked. I'd like the page to scroll to that div only on the first time a button in "yourgoal" is clicked. Here is the code I am using. I don't want the page to scroll to the div after the first click though.
$('input:radio[name="yourgoal"]').change(function() {
if ($('#calculations1').css('display') == 'none') {
$('html, body').animate({
scrollTop: $("#scrollto").offset().top
}, 1500);
}
The problem is, it breaks the rest of the functions I have on .change(). I don't want to put all the functions after the scroll within the if and then again into an else {} statement as that seems like a ton of redundant code (it also breaks it)? How do I just do a simple if statement which doesn't affect the rest of the actions within the .change function?
Maybe there is a simpler solution and I am overthinking this?
Thanks in advance!
$('input:radio[name="yourgoal"]').one('change',
function () {
if ($('#calculations1').css('display') == 'none') {
$('html, body').animate({
scrollTop: $("#scrollto").offset().top
}, 1500);
}
}
);
I recommend using one. After first time event is triggered it is automatically removed.
If you have more code to go in that change that needs to stay after the first change, you can use event namespacing and attach more than one change.
$('input:radio[name="yourgoal"]').one('change.firstChange',
function () {
if ($('#calculations1').css('display') == 'none') {
$('html, body').animate({
scrollTop: $("#scrollto").offset().top
}, 1500);
}
}
);
$('input:radio[name="yourgoal"]').on('change.allChanges',
function () {
// All your other code that stays attached
}
);
EDIT: Seems like one won't work since that 'one' event will be attached to each radio button that has name yourgoal, so it will scroll once for each first radio button click individually but you can do this if you only want to scroll the first time a radio button is selected and not upon the first selection of other radio buttons that all share the yourgoal name.
Fiddle: http://jsfiddle.net/31s3LLjL/3/
$('input:radio[name="yourgoal"]').on('change.firstChange',
function () {
$('input:radio[name="yourgoal"]').off('change.firstChange');
$('html, body').animate({
scrollTop: $("#scrollto").offset().top
}, 1500);
}
);
$('input:radio[name="yourgoal"]').on('change.allChanges',
function () {
// Other change stuff
}
);
You may use event.stopImmediatePropagation() to prevent execution of subscribed callbacks on specific event.
$('input:radio[name="yourgoal"]').one('change',function(event) {
event.stopImmediatePropagation();
if ($('#calculations1').css('display') == 'none') {
$('html, body').animate({
scrollTop: $("#scrollto").offset().top
}, 1500);
}
});
Just make sure that your code prepends all other change handler definitions.
The website I'm working on: zarwanhashem.com
You can find my previous question (which includes my code) here: Bootstrap one page website themev formatting problems
The selected answer solved my issues but I have another problem because of the jQuery adjustment with the -50. Now the navbar incorrectly indicates the page I am on. i.e. The navbar is supposed to darken the section that you are currently in. So if you click "about" it will take you to the about page and darken the about link in the navbar. But the link BEFORE the page you are on is highlighted because the -50 makes the navbar think that it is on the previous section. You can easily try this to see what I mean.
How can I fix this? Thanks. The reason I didn't add this onto my old question is because the person stopped looking at it.
Also please keep your explanations simple/dumb them down a little for me. I know very basic HTML and CSS, and I don't know any Javascript.
scrolling js:
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top -50
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
js added at end of document as suggested by poster in previous question:
$(window).ready(function(){
$('div[class^="content-section"]').css('min-height', $(window).height());
})
You are putting the .active class on the wrong element somehow. You need to put the .active class on the clicked element. You should handle the active state with js. This is my solution based on your HTML structure but I'm sure there are different solutions as well.
$(document).on('click', '.page-scroll', function(event) {
var clicked = event.target; //get the clicked element
if($(clicked).closest('ul').hasClass('dropdown-menu')){ //check if clicked element is inside dropdown
$(clicked).closest('ul').parent().siblings().removeClass('active'); //remove active class from all
$(clicked).closest('ul').parent().addClass('active'); add active class on clicked element parent - in your case <li> tag.
}else{
$(clicked).parent().siblings().removeClass('active');
$(clicked).parent().addClass('active');
}
}
Let me know if this works for you.
EDIT after you posted your code
Try replacing your function with this:
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top -50
}, 1500, 'easeInOutExpo');
if($($anchor).closest('ul').hasClass('dropdown-menu')){
$($anchor).closest('ul').parent().siblings().removeClass('active');
$($anchor).closest('ul').parent().addClass('active');
}else{
$($anchor).parent().siblings().removeClass('active');
$($anchor).parent().addClass('active');
}
event.preventDefault();
});
});
here is a work around this problem.
just change the contents of your scrolling-nav.js to the following:
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top -50
}, 1500, 'easeInOutExpo', function(){
$('ul.navbar-nav li, ul.dropdown-menu li').removeClass('active');
$($anchor).parent('li').addClass('active');
});
event.preventDefault();
});
});
i have this javascript so that when a user is scrolling on the page there will be a small icon to the side that will scroll all the way back up the page rather than manually scrolling. The button shows fine but when i click on it it is not going all the way to the top.
html
Scroll
Script
$(document).ready(function () {
$('#main').scroll(function () {
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function () {
$("html, body, main_container, main").animate({ scrollTop: 0 }, 600);
return false;
});
});
problem is in the selectors, you are missing either # id selector or . class selector, to me it seems id:
change this:
$("html, body, main_container, main")
to this and see if it helps:
$("html, body, #main_container, #main")
//-------------^----------------^--------these selector notations