We Keep Coding

jQuery problems with offset()

I ran into a problem when creating a scroll for headlines.
I looked at the element code, the code swears at the element "..offset().top"
$(function() {
var header = $("header"),
introH = $("#intro").innerHeight(),
scrollOffset = $(window).scrollTop()
// scroll
checkScroll(scrollOffset)
$(window).on("scroll", function() {
scrollOffset = $(this).scrollTop()
checkScroll(scrollOffset)
})
function checkScroll() {
if (scrollOffset >= introH) {
header.addClass("fixed")
} else {
header.removeClass("fixed")
}
}
// scroll keys
$("[data-scroll]").on("click", function(event) {
event.preventDefault();
var
blockId = $(this).data("scroll"),
blockOffset = $(blockId).offset().top /* This line */
$("html, body").animate({
scrollTop: blockOffset
}, 500)
})
})
enter image description here

Javascript Sticky nav scrollTo

so I got this sticky header that works great the only problem I have is when I press a link and the screen scrolls down it overlaps my content so I need to set a -47px height or something like that so the # it scrolls to get below the menu and not under it.
My code
$(document).ready(function() {
var stickyNavTop = $('.header').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.header').addClass('sticky');
} else {
$('.header').addClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
$(document).ready(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(closenav).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 760 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
Sorry if i'm not clear enough and need to explain it in another way.
Please keep in mind I'm a JS rookie!
Thank you!

var $root = $('html, body');
$('a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top -47
}, 500, function () {
window.location.hash = href;
});
return false;
});
add this within your $(document).ready(function(){});

Scroll to Top jQuery

I am trying to create a super simple Scroll to top button.
It works but it's appending the button to the body every time when i scroll.
I would like to append it only once and fade it in and if you click it you will be scrolled back to the top off the page and it will fadeout.
The functionality is working but its appending it to the page in an loop.
I know it's a simple bug but, I can't figure it out.
My code:
$(window).scroll(function () {
var scrollPosition = $(this).scrollTop();
var to_top = '<a class="back-to-top" href="#"></a>';
if (scrollPosition >= 500) {
$("body").append(to_top);
$('.back-to-top').fadeIn(1600);
} else {
$('.back-to-top').fadeOut(800);
}
$( ".back-to-top" ).on( "click", function(event) {
event.preventDefault();
$("html, body").animate({ scrollTop: 0 }, "slow");
});
});

Well, you're telling it to append the every time the scroll event is fired, so check if it exists first, see if it works out for you.
$(window).scroll(function () {
var scrollPosition = $(this).scrollTop();
var toTops = $('.back-to-top'); // get jQ object once
if (scrollPosition >= 500) {
if (!toTops.length){ // if no elems
// create one
var $to_top = $('<a class="back-to-top" href="#"></a>');
$to_top.on( "click", function(event) {
event.preventDefault();
$("html, body").animate({ scrollTop: 0 }, "slow");
});
// then attach it
$("body").append($to_top);
} else {
// if elems exist, fade them in
toTops.fadeIn(1600);
}
} else {
toTops.fadeOut(800);
}
});

You should create button once and then hide/show it.
jQuery(function($) {
var to_top = $('<a class="back-to-top" href="#"></a>'),
visible = false;
to_top.appendTo('body').hide();
$( ".back-to-top" ).on( "click", function(event) {
event.preventDefault();
$("html, body").animate({ scrollTop: 0 }, "slow");
});
$(window).scroll(function () {
if ($(this).scrollTop() >= 500)
if(!visible){
to_top.stop(true,false).fadeIn(1600);
visible = true;
}
else
if(visible){
to_top.stop(true,false).fadeOut(800);
visible = false;
}
});
});

Scroll to Top and Scroll to Bottom in Jquery

I tried to implement the scroller with top to bottom and bottom to top with jquery. I recently tried with percent.
From the Top to bottom with pixel is seems ok.(Means it works) for the bottom to top is only make scroll not completely finish if i mention percentage as 100
$('#spnTop').on("click",function(){
var percentageToScroll = 100;
var percentage = percentageToScroll/100;
var height = jQuery(document).height();
var documentHeight = $(document).height();
var scroll = $(window).scrollTop();
alert(scroll);
var scrollAmount = Math.round((height) * percentageToScroll/ 100)-scroll;
//alert(point);
alert(scrollAmount);
$('html,body').animate({ scrollTop: scrollAmount }, 'slow', function () {
alert("reached top"); });
});
Here is the fiddle.
For Example:
percentageToScroll is now 100 but the ending of scroll is not completely finish. (from bottom to top)
For top to bottom is 100 then it completely scroll to bottom of the page.
I am not sure how to make it workable.
Thanks.
Vicky

What about this?
$('#spnTop').on("click",function(){
var percentageToScroll = 100;
var percentage = percentageToScroll/100;
var height = $(document).scrollTop();
var scrollAmount = height * (1 - percentage);
alert(scrollAmount);
$('html,body').animate({ scrollTop: scrollAmount }, 'slow', function () {
alert("reached top"); });
});
$('#spnbottom').on("click",function() {
var percentageToScroll = 100;
var height = $(document).innerHeight();
var scrollAmount = height * percentageToScroll/ 100;
alert(scrollAmount);
var overheight = jQuery(document).height() - jQuery(window).height();
//alert(overheight);
jQuery("html, body").animate({scrollTop: scrollAmount}, 900);
});
Fiddle here

As I specified in comment I prepared a Demo
$(document).on("click","#spnTop",function(){
$('html,body').animate({scrollTop: 0}, 1500);
});
$(document).on("click","#spnbottom",function() {
var window_height = $(window).height();
var document_height = $(document).height();
$('html,body').animate({ scrollTop: window_height + document_height },1500);
});
I hope it may help you

jQuery(document).ready(function($){
$('#goToTop').on("click",function(){
$("html, body").animate({ scrollTop: 0 }, 2000);
return false;
});
$('#goToBottom').on("click",function() {
$("html, body").animate({scrollTop: $(document).innerHeight()}, 2000);
return false;
});
});

Now see you need the percentages
See demo here:
http://jsfiddle.net/a3g4d/
$('#spnTop').on("click",function(){
var percentage = 100;
var height = $(document).height();
var remove = +height / +100 * +percentage;
var spaceFromTop = +height - +remove;
$('html,body').animate({ scrollTop: spaceFromTop }, 'slow', function () {});
});

You can also use the span positions if you have top and bottom span always.
$('#spnTop').on("click",function(){
$('html,body').animate({
scrollTop: $("#spnbottom").offset().top
}, 'slow', function () {
alert("reached top");
});
});
http://jsfiddle.net/4qLvC/8/

I hope something like this :) might help you
$('#spnTop').on("click",function(){
$('html,body').animate(
{ scrollTop: 0 },
'slow',
function () {});
});
$('#spnbottom').on("click",function() {
var window_height = $(window).height();
var document_height = $(document).height();
$('html,body').animate(
{ scrollTop: window_height + document_height },
'slow',
function () {});
});
Use this link to try it out : demo

$(function () {
$("#scrollToBottom").click(function () {
$('html, body').animate({ scrollTop: window.screen.height }, 400);
});
$("#scrollToTop").click(function () {
$('html, body').animate({ scrollTop: 0 }, 400);
});
});

Jquery offset with % instead of px - possible?

I have this script were i want it to make an offset for 15% top of the id its scrolling to. I have try many things, so im kinda curious what approach you guys would take. I have stripped it down to what works, since all of my own attempts failed. Hope someone can help me out.
$('a[href*=#]').bind('click', function (e) {
e.preventDefault();
var target = $(this).attr("href");
$('html, body').stop().animate({ scrollTop: $(target).offset().top }, 800, function () {
location.hash = target;
});
return false;
});
i made a fiddle here: http://jsfiddle.net/77rFz/

I didn't try it, but I would say something like this could work:
$('a[href*=#]').bind('click', function (e) {
e.preventDefault();
var target = $(this).attr("href");
var offset = $(target).offset().top - $(target).height * 0.15;
$('html, body').stop().animate({ scrollTop: offset }, 800, function () {
location.hash = target;
});
return false;
});

Try something like this
Math.round(parseInt($(target).offset().top) * 0.15)

This worked!
$('a[href*=#]').bind('click', function (e) {
e.preventDefault();
var target = $(this).attr("href");
var parentDiv = $(this).parent(".wrap1");
var offset = Math.round(parseInt($(target).offset().top) - (0.15 * parentDiv.height()));
$('html, body').stop().animate({ scrollTop: offset }, 800, function () {
//location.hash = target;
});
return false;
});