I am using Jquery with HTML and trying to scroll to the next Div with Animation.
Sadly, nothing is helping me out. I want an icon on the bottom left which will scroll to the next div. This is my basic divs
<body>
<div id="scroller"><a class="display" href="#">Link </a></div>
<div class="menu-wrap"></div>
<div id="section1" class="section current"></div>
<div id="section2" class="section"> </div>
<div id="section3" class="section"> </div>
<div id="section4" class="section"></div>
<div id="section5" class="section"></div>
<div id="section6" class="section"></div>
<div id="section7" class="section"></div>
<div id="section8" class="section"></div>
<div id="footer"></div>
</div>
I want to scroll between the "section".I have others Divs inside each of them but different ids. I dont think that should be a problem? Nothing seems to work, My jQUery is
$(document).ready(function(){
$('a.display').on('click', function(e) {
e.preventDefault();
var offset = $(this).next().find('div#section').offset().top;
$('html, body').stop().animate({ scrollTop: offset }, 400);
});
});
Your code is not doing what you think.
First, $(this).next() returns no elements. Event if it did, you should've used .find('div.section') instead of .find('div#section'). Also, for the "scroll to next" capability you have be able to somehow know the current scroll position and compare it to the position of the
anticipated next one.
Considering this I suggest using jquery-scrollTo plugin instead of inventing your own implementation.
Here's an example usage: JSFiddle
Related
I have a problem with scrollTop that partially works that I will try to describe. First to get it work I applied the solution found here.
I have an angular component that renders a list of nested angular components in it using *ngFor. Snippet follows (parent):
<div id="scrollable-container" class="scrollable">
<div *ngIf="isAccountsToShow" class="top-row-spacing">
<div *ngIf="accountsToggle">
<div class="grid-x ruler">
<div class="small-4 cell">
<div class="text-left sub-header">Header 1</div>
</div>
<div class="small-1 cell">
<div class="text-left sub-header">Header 2</div>
</div>
<div class="small-2 cell">
<div class="text-center sub-header">Header 3</div>
</div>
<div class="small-2 cell">
<div class="text-center sub-header">Header 4</div>
</div>
<div class="small-3 cell">
<div class="text-center sub-header">Header 5</div>
</div>
</div>
<div *ngFor="let data of displayAccounts">
<member-product
[memberNumber]="mnum"
id={{data.accountNumber}}
(scrollIntoView)="scrollToView(data.accountNumber)"
[product]="data" </member-product>
</div>
</div>
</div>
</div>
The child's html contains info on each header and in addition a ellipsis toggle at the far right that looks like this:
screenshot of a single element (Apparently I need more reputation points to fully add a screenshot. Hope it helps anyway).
The problem: everytime I click the ellipsis it will expand the account information (NOTE: this is NOT another angular nested component) to reveal even more information AND the account clicked will autoscroll to the top. screenshot of expanded widgetThis works for the first accounts considering that there might be dozens or even hundreds but will fail to scroll only for the last few and it will fail gradually, meaning that it will begin to scroll less closer to the top of its container until the very last item which will not scroll at all. Also it fails when only a few elements are displayed causing no overflow-y where the scrolling simply does not happen.
Scroll code: (I'm using event emitter here as you might have already noticed)
scrollToView(accountNumber): void {
var element = document.getElementById(accountNumber);
var topPos = element.offsetTop;
document.getElementById('scrollable-container').scrollTop = topPos - 10;
}
Css code:
.scrollable {
max-height: 24rem;
position: relative;
}
I not quite sure if this is an overflow-y related issue or what. I am completely puzzled with this.
Searching for this very particular problem in Stackoverflow yielded no results, be it angular be it jquery although it doesn't apply to my angular 2 scenario.
I appreciate any insight or help on the matter.
I have 3 divs of the same size stacked on each other. Each of the divs has got the size of the screen which is visualized on the image with the black frame.
What I would like to achieve is to make div2 visible at the beginning. This is means div2 is filling the screen and the other divs are just visible when I am swiping up or down.
Right now, div1 is visible at the beginning since it is the first div.
Any help?
<div id="wrapper" style="overflow:hidden" layout="column">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
Try this library:
https://github.com/alvarotrigo/fullPage.js
HTML
<div id="fullpage">
<div class="section" id="div1">a</div>
<div class="section active" id="div2">b</div>
<div class="section" id="div3">c</div>
</div>
CSS
#fullpage>div{
height: 100vh;
}
In order to view the second square on page load add active class to the div.
Hope it helps.
I need to put the scrolling behaviour on the body rather than the HTML, due to using CSS Parallax. However, I have got an issue with adding sticky classes to my header using JavaScript.
I need to be able to detect that the body has scrolled, this works fine, however i'm unable to get the offset that the user has scrolled to!
I have tried everything when is online, for example:
$('body').scrollTop()
document.body.scrollTop
document.getElementsByTagName('body')[0].pageYOffset
None of this is working, it always returns 0!
Edit:
I can't modify any of the HTML apart from what is between the comments.
<html>
<body>
<div itemscope itemtype="http://schema.org/AutoDealer">
<div id="main-wrap" class="parallax">
<div class="row">
<div class="main twelvecol">
<!-- Editable -->
<div>
<div class="row-block finance parallax__group">
<div class="parallax__layer--back parallax__layer"></div>
<div class="wrapper">
<div class="container">
<div class="parallax__layer--base parallax__layer">
<p>This is all of the top level content</p>
</div>
</div>
</div>
</div>
</div>
<!-- END Editable -->
</div>
</div>
</div>
</div>
</body>
</html>
here is a codepen showing the various examples not working
https://codepen.io/anon/pen/RgPrQv
You are looking for
$(window).scroll(function() {
$(window).scrollTop();
});
I have looked around for hours trying to figure this out. I have a site built up like this jsfiddle.
<div id="window">
<div id="section-wrapper">
<div id="one" class="section"><p>One</p>
</div>
<div id="two" class="section"><p>Two</p>
</div>
<div id="three" class="section"><p>Three</p>
</div>
<div id="four" class="section"><p>Four</p>
</div>
<div id="five" class="section"><p>Five</p>
</div>
<div id="six" class="section"><p>Six</p>
</div>
<div id="seven" class="section"><p>Seven</p>
</div>
<div id="eight" class="section"><p>Eight</p>
</div>
<div id="nine" class="section"><p>Nine</p>
</div>
</div>
I use ScrollTo and localscroll to navigate the site and I wonder how I can implement a parallax effect to the section wrapper and make the background move slower. Everywhere I look the parallax plugins and scripts is based on a scroll function, but since I dont use scroll to navigate I have no idea how to add the effect.
Is there a way to only adress the actual background-image, i.e. use .animate and/or .css to background-position property or should I put an element behind the section-wrapper? Im fairly new to jquery and javascript but if anyone could point me in the right direction i think i could figure it out. I have just have no idea where to start..
Attach this file to header of your site
https://github.com/markdalgleish/stellar.js/tree/master/src
initiate the script
<script type='text/javascript'>
<!--
(function($) {
$(document).ready(function() {
$.stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});
})(jQuery);
// -->
</script>
now you need to add the tag below to div that wraps the background
<div data-stellar-background-ratio="0.5">
You can update the value 0.5 - it defines the speed of background image.
I would like to link the scrolling of the wrapper1 and wrapper2:
<div class="wrapper1">
<div class="div1">
</div>
</div>
<div class="wrapper2">
<div class="div2">
<div data-ng-class="{'hidden': loading!=0 }"
data-ng-form="gridForm">
<table class="form grid table" style="height: 600px; width: 1500px;">
</table>
</div>
</div>
</div>
The above is loaded dynamically and from what I have read I cannot use the .on jQuery method with scroll. So I would like to use something like this:
<div id="mydiv" onscroll='myMethod();'>
function myMethod(){ alert(1); }
Can someone give me some suggestions as to how I can make the scrolls work at the same time using the onscroll call and methods?
Please note that this is not a duplicate question to:
How can I get two scroll bars to scroll at the same time with jQuery and .on?