css scrollLeft animate moves body vertically - javascript

Hi I am trying to write a function that horizontally scrolls a div to a specific point given a parameter. Everything functions properly except when the document/body is scrolled down and the function is executed by pressing a letter. When this happens the whole document/body is scrolled up to the top. I really can't figure out what I am doing wrong here but I don't want the page to scroll to the top.
an example of the code can be found at http://www.hokosounds.com/testRedesign/store-test.html#
Thanks for the help!

$(document).ready(function(){
$('a').click(function(e, _letter){
e.preventDefault();
var _letter = $(this).html();
scrollToLetter(_letter);
});
scrollToLetter = function(_letter) {
var _distance = $('#'+_letter+'Start').position().left+$('#store-nav-artist-names').scrollLeft();
$('#store-nav-artist-names').animate({
scrollLeft: _distance
}, 800);
};
});

The page will scroll to the top if you don't handle the click event to either return false or event.preventDefault http://api.jquery.com/event.preventDefault/
It will stop the behavior of a link being clicked.

Related

Scroll to div on clicking the div

Here is the fiddle link https://jsfiddle.net/hitech0101/5vhdm5hy/
$('.block').click( function () {
$('#mainContainer').animate({'width':'20%'}, 1000);
$(this).css({'background-color':'blue'});
$('.block').css({'display':'block','width':'100%'});
$('.second').css({'display':'inline-block'})
});
In the fiddle, i am using jquery to convert the horizontal blocks into vertical blocks. I have changed the block color from red to blue when the block is clicked. When i click a particular block i would the scroll to move to the location of the block in the vertical view. I have tried jquery's scrollTop() method but still could not get it working the way i wanted it to. Please help.
The fiddle is partial representation of the webpage i am working on. There is more content on the original page which i have excluded. The maincontainer is the second container on the page.
No JavaScript necessary. You can specify an element in an anchor's href and it'll scroll it to the top of the window, including itself.
Wrap the div in an anchor or just use the anchor tag itself, they're both wrappers.
<a href="#scrollToMe">
<div id="scrollToMe"></div>
</a>
Just remember that it can only scroll the element into view to the best of its ability, if the item is at the bottom of the parent element the scroll will hit the bottom and it won't be able to go any further.
$(this).get(0).scrollIntoView();
Add this line into the .click function.
Fiddle
I suggest you get the offset top value and animate the #maincontainer to that position
$('.block').click( function () {
$('#mainContainer').animate({'width':'20%'}, 1000);
$(this).css({'background-color':'blue'});
$('.block').css({'display':'block','width':'100%'});
$('.second').css({'display':'inline-block'});
/*below is what i was talking about*/
var pos = $(this).offset();
$('#mainContainer').animate({ scrollTop: pos.top });
});
$(document).on("click", ".block", function() {
var _body_html = $('html, body');
var _scroll_to = $('.scroll-to');
var _top = _scroll_to.offset().top;
_body_html.animate({
scrollTop: _top
}, 1000);
setTimeout(function() {
_body_html.finish();
}, 1000);
});

Update position of div while scrolling

For another stack question I have tried to write a short script. It should track the position of a div .list_item while scrolling and apply the .offset().top to another div.
To test if the function is fired I have written a console.log inside my code, which was never seen again. Why does my function do not fire while scrolling?
$(document).ready(function() {
// fire function everytime the window is scrolled
$(window).scroll(function(){
// set element to relate to
var list_items = $('div.list_item');
// get each position
list_items.each(function() {
// store offset().top inside var
var list_item_position = $(this).offset().top;
// select previous dropdown_list item
$(this).prev().find('ul.dropdown_list').css({
// apply offset top
top: list_item_position + "px"
});
});
// write to console to track changes
console.log('positions updated');
}); // .scroll
}); // document.ready
Suggestions appreciated!
JSFIDDLE DEMO
As pointed out by #Carlos Delgado in the comments, $(window).scroll tracks, if the windows is being scrolled, while setting the first line to $('#wrapper').scroll tracks, if the #wrapper is being scrolled, which works perfect.
Thanks for pointing this out and the other helpful comments!

One page scroll wrong offset with floating menu bar

I am having an issue. Im using a one page design for a friend with a fixed floating menu on the top. The problem I encounter is that when I click on a link it scrolls down but the offset is not right. Most the of time it scrolls down a little too much covering the content below the menu. What I am trying to achieve is that the scrolling stops at the div being exactly below my menu bar. The other issue is that somehow it wont scroll down when the space between two sections is too narrow. It tries but somehow only moves a few pixels then stops. I can imagine that both are related to the offset issue.
Im sorry, english is not my native language.
Here is what I got so far. A standard scrolling function with window.location.hash. The target are divs spread across the site.
$(document).ready(function () {
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash;
var t = $(this.hash).offset().top;
$('.wrapper').animate({
scrollTop: t,
}, 1000, function () {
window.location.hash = target;
});
});
});
You can see an example of the problem live: http://rolfvohs.com/
What I tried so far was using the add.class function to bind the div with an extra padding when a link is clicked. It does work in a way but creates an awkward space. I also tried placing the divs at different locations but that does not fix the job either, just messes it up further.
I would appreciate some insight.
window.location.hash = target;
moves the scroll by default to the div position and you are setting offset top before the hash change so first its changes the offset after that it move to div location.
first try after removing the line "window.location.hash = target;" from the code
or
move the "window.location.hash = target;" out side and above the "$('.wrapper').animate({})" it will work .

Change scrollTop offset

I am using bootstrap 3 and have a fullscreen hero unit at the top of my page, below that is my navigation. I have some js which allows my navbar to stick to be fixed at the top after you scroll past the full screen hero. Also some js for my smooth scrolling links.
The problem is the offset is different before you scroll past the full screen hero and after. But it works fine when you are past the jumbotron. I have tried a bunch of different things but I can seem to get this to work exactly.
Check out the fiddle here.
Here is my js for the smooth scrolling links:
$(document).ready(function() {
// navigation click actions
$('.scroll-link').on('click', function(event){
event.preventDefault();
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
// scroll to top action
$('.scroll-top').on('click', function(event) {
event.preventDefault();
$('html, body').animate({scrollTop:0}, 1200);
});
// mobile nav toggle
$('#nav-toggle').on('click', function (event) {
event.preventDefault();
$('#main-nav').toggleClass("open");
});
});
// scroll function
function scrollToID(id, speed){
var offSet = 95;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
$('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
mainNav.css("height", "1px").removeClass("in").addClass("collapse");
mainNav.removeClass("open");
}
}
if (typeof console === "undefined") {
console = {
log: function() { }
};
}
By changing var offSet = 95; I am able to adjust the offset but what would be the best way to use 180 before the navbar sticks to the top but 95 when it does?
Also here is the js I am using for my navbar:
$(function () {
/* $(".navbar-fixed-top").css({"top":$(".jumbotron").height()});
$(window).resize(function (e) {
$(".navbar-fixed-top").css({"top":$(".jumbotron").height()});
});*/
$(document).on( 'scroll', function(){
console.log('scroll top : ' + $(window).scrollTop());
if($(window).scrollTop()>=$(".jumbotron").height())
{
$(".navbar").addClass("navbar-fixed-top");
}
if($(window).scrollTop()<$(".jumbotron").height())
{
$(".navbar").removeClass("navbar-fixed-top");
}
});
});
Are you open to angular.js? I have a directive i use for this. As seen here.
I'll grab the plunker link for you. you might find the code helpful.
Essentially you need to create a ghost dom element to take the place of the menu when you pull it to an new layout position.
EDIT: Here it is
I won't suggest grabbing angular just for this. But you can use the basis of the events and logic to build your own solution.
This here is creating an element and placing in its place
$scope.spacer = $element.after(
'<div class="spacer" style="height:' + $element[0].clientHeight + 'px"> </div>').next();
then this element is removed when the menu is back to its static position.
Inspect the dom and watch how it changes, this will probably help you see the events and changes that need to take place.
EDIT 2 SOLUTION:
HERE is the concepts applied to your JSFiddle
It's not the best solution but by adding margin: 0 0 -100px 0; to your .navbaryou lose the spacing issue.
Also you're getting 22 console errors because of missing images. I'm not saying that this is causing any major problems but you would be better off losing them.
The problem is that when you have not scrolled past the hero, navigation is still part of the layout and pushes content bellow it a little lower. When you scroll past (either manually or via a script) the hero, navigation is removed and fix positioned. That makes everything which was bellow to "jump up" exactly of the navigation height.
That means if portfolio was 1000px from the top, on click you say: go 1000px from top; but then porfolio moves 100px up (as explained above) meaning it is now 900px from the top while the window scrolled 1000px as you asked.
When you have scrolled past the hero, nothing changes its position.

jQuery onScroll() show and hide DIVs

I have a simple onScroll function, which shows a DIV when the scroll (down) height is 100 for example, and then if scrolled up soon as it reach 100 it hides the div, works perfect.
However, if I scroll down quickly and while its showing the DIV if I quickly scroll up & down 2 three times, it doesn't catch the event, even if its up again, it still shows the DIV, but again if I scroll even 1 pixel down, it hides it and if reaches 100 then it shows DIV again.. I hope I made it clear, I dont have an online demo as I am working on localhost.. below is my function that I am using standalone in the template within just <*script> tag..
jQuery(document).scroll(function ($) {
var y = jQuery(this).scrollTop();
var hoffset = 100;
if (y > hoffset) {
// show div
} else {
// hide div
}
});
Can someone please guide me to right direction, what other best approaches can be done for this, basically I am doing this for header nav div..
regards
Do you want like this? See my Fiddle
I use fadeIn() and fadeOut() instead.
The only way I found to stop animation, while its in the process is below and works..
jQuery('.thedivclass').stop(false, true).slideDown();

Categories

Resources