Develop Reference

Copying jQuery offset from one element to another puts them in different places

My goal is given 2 divs, one with tagged content, generate new content in the other div that is vertically aligned with the first. A minimal example of what I've got so far is below in the snippet.
I've tried doing adjustments like subtracting $('sidebar').offset().top and/or the height of the header from the new element's top-side offset (thinking that maybe the new element was offsetting from the top of the sidebar instead of the document for some reason), but that still doesn't put it in the right place.
I think the hurdle here is figuring out why tag_offset.top and test_tip.offset().top aren't equal at the end, even though that's explicitly being assigned when test_tip is instantiated.
var tag_offset = $('.jt-tooltip-tag').offset();
tag_offset['left'] = 0;
var tag_text = $('.jt-tooltip-text').text();
var test_tip = $('<div class="jt-sidebar-tip">').text(tag_text).offset(tag_offset).appendTo('#jt-tooltip-sidebar');
.middlebar {
width: 49%;
float: left;
}
.sidebar {
height: 500px;
width: 49%;
float: right;
border: 1px solid purple;
}
.jt-tooltip-tag {
font-weight: bold;
background-color: #14c9c9;
}
.jt-tooltip-text {
display: none;
}
.jt-sidebar-tip {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
<h1 class="header">
Omigosh a header!
</h1>
<div class="content">
<div class="middlebar">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec tortor justo. Donec magna neque, interdum eu diam ut, efficitur pharetra ligula. Aenean libero justo, feugiat a est a, hendrerit cursus justo. Donec vehicula ligula ut diam bibendum, vel
convallis purus blandit. Nulla <span class="jt-tooltip"><span class="jt-tooltip-tag">facilisi.</span><span class="jt-tooltip-text">This should be vertically-aligned with facilisi.</span></span> Donec pretium, leo at commodo dignissim, eros
ligula vulputate sem, quis iaculis turpis est ac erat. Ut ultrices mauris efficitur tellus gravida convallis vitae ac magna. Nullam vel enim ut eros tempor dictum et quis risus. Aliquam finibus sed justo eu porttitor.
</div>
<div class="sidebar" id="jt-tooltip-sidebar">
</div>
</div>
</div>

In order to position an element relative to the document, you need to set its CSS to position: absolute;. But then you also need to set its left offset to a position that puts it into its container. I've done this by copying $("#jt-tooltip-sidebar").offset().left.
var tag_offset = $('.jt-tooltip-tag').offset();
tag_offset.left = $("#jt-tooltip-sidebar").offset().left;
var tag_text = $('.jt-tooltip-text').text();
var test_tip = $('<div class="jt-sidebar-tip">').text(tag_text).offset(tag_offset).appendTo('#jt-tooltip-sidebar');
.middlebar {
width: 49%;
float: left;
}
.sidebar {
height: 500px;
width: 49%;
float: right;
border: 1px solid purple;
}
.jt-tooltip-tag {
font-weight: bold;
background-color: #14c9c9;
}
.jt-tooltip-text {
display: none;
}
.jt-sidebar-tip {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
<h1 class="header">
Omigosh a header!
</h1>
<div class="content">
<div class="middlebar">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec tortor justo. Donec magna neque, interdum eu diam ut, efficitur pharetra ligula. Aenean libero justo, feugiat a est a, hendrerit cursus justo. Donec vehicula ligula ut diam bibendum, vel
convallis purus blandit. Nulla <span class="jt-tooltip"><span class="jt-tooltip-tag">facilisi.</span><span class="jt-tooltip-text">This should be vertically-aligned with facilisi.</span></span> Donec pretium, leo at commodo dignissim, eros
ligula vulputate sem, quis iaculis turpis est ac erat. Ut ultrices mauris efficitur tellus gravida convallis vitae ac magna. Nullam vel enim ut eros tempor dictum et quis risus. Aliquam finibus sed justo eu porttitor.
</div>
<div class="sidebar" id="jt-tooltip-sidebar">
</div>
</div>
</div>

Javascript - Adding a top fixed bar and push all the other elements down

I am trying to add top bar on a webpage which has 2 other elements that are top:0 and position:fixed. For example, think of a website with wp-admin bar and a menubar fixed on top.
I am creating a plugin & so I cannot modify the website's code, but can override styles.
Here is my CSS:
.bar-render-top
{
top:0px;
margin-top: 0px;
position: fixed;
z-index: 999999;
width:100% !important;
}
I can see the bar but the others are hidden under it. What I would like for them is to 'move down'. I could add custom css and find the elements' css and add margins, but since this is a plugin, it should work on any website. So I cannot add site-specific styles.
Ideally, this should behave like the mozbar chrome addon, which adds a topbar as an iframe.
Is this possible? Any help would be highly appreciated.
Thank much.
body {
background-color: white;
margin: 0;
padding: 0;
padding-top: 90px;
}
.fixed-bar {
width: 100%;
position: fixed;
top: 0;
height: 40px;
line-height: 40px;
text-align: center
}
.bar-1 {
background-color: gold;
}
.bar-2 {
background-color: pink;
margin-top: 40px;
}
.my-bar {
background-color: blue;
height: 40px;
line-height: 40px;
text-align: center;
color: white;
}
<div class="fixed-bar bar-1">
fixed bar one
</div>
<div class="fixed-bar bar-2">
fixed bar two
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales libero enim, sed convallis leo ornare eget. Nullam condimentum, diam ullamcorper sollicitudin fringilla, eros nisi placerat tellus, at volutpat velit felis eu ipsum. Suspendisse sed
nisl a orci dapibus euismod et eget odio. Maecenas elementum erat elit, et efficitur ex feugiat ac. Nam convallis blandit nisl, finibus pretium tortor vehicula at. Sed ultricies finibus consectetur. Nulla nec diam a velit pellentesque consequat ut
a lorem. Fusce eget massa lorem. In egestas risus non nisi condimentum facilisis. Quisque vulputate est ut odio vestibulum, at vulputate tellus lacinia. Ut interdum magna id velit lacinia, nec lobortis velit consequat. Ut et malesuada risus. In interdum
eleifend est auctor tincidunt. Nulla facilisi. Proin faucibus ex euismod, porta purus ut, volutpat nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut mattis volutpat tempus. Vivamus condimentum velit in
lacus ultrices ultricies. Morbi bibendum mauris ac pretium sagittis. Duis eget augue dapibus, convallis ante ut, accumsan ligula. Morbi cursus tellus viverra justo rutrum lobortis
</div>
<div class="my-bar">
this has to be on the top of any generic page
</div>

I ended up adding a margin-top to fixed elements at render and on scroll events.
My main top bar is rendered as <div id="appbar-container">...</div> id (to avoid being pushed too). Then I do it like that:
const APPBAR_HEIGHT = 64;
const translateFixed = () => {
Object.assign(document.body.style, {
position: "relative",
top: APPBAR_HEIGHT + "px",
});
for (let e of Array.from(document.body.getElementsByTagName("*"))) {
if (
e instanceof HTMLElement &&
e.getAttribute("id") !== "appbar-container"
) {
const position = getComputedStyle(e)
.getPropertyValue("position")
.toLocaleLowerCase();
const top = e.getBoundingClientRect().top;
if (position === "fixed" && top >= 0 && top <= APPBAR_HEIGHT) {
e.style.marginTop = APPBAR_HEIGHT + "px";
e.classList.add("appbar-offset");
} else if (e.classList.contains("appbar-offset")) {
e.style.marginTop = "0";
}
}
}
};
// Initial push
translateFixed();
// Push on scroll
document.addEventListener("scroll", translateFixed);
I am not very proud of it though to be honest and I think there is room for improvement... But, well, it works.

If you know the height of your bar, you can wrap all the content of the page with your own block, add some margin above it, and then add your bar using JS. Also it would be nice to set a background color to your bar. Here is an example using jQuery:
$('body').children().wrapAll('<div class="bar-render-content" />');
$('body').prepend('<div class="bar-render-top">Test bar</div>');
.bar-render-top
{
top:0px;
margin-top: 0px;
position: fixed;
z-index: 999999;
width:100% !important;
margin-bottom:50px;
background-color: lightgrey;
}
.bar-render-content
{
margin-top:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div class="any">
Any text
</div>
<div class="content">
Lorem ipsum porttitor malesuada fusce adipiscing gravida eu sit tellus nam justo sem metus, elementum lorem adipiscing. Enim commodo malesuada porttitor ultricies diam, auctor congue sodales eros sem quisque, risus magna donec integer, lorem donec diam magna vivamus. Adipiscing bibendum pellentesque curabitur orci proin tempus sapien amet: lorem tempus. Quam nam, ipsum magna justo nam lorem nam, eu a fusce donec sed eget metus mauris ligula sagittis rutrum ultricies non at. Sed quisque lectus duis, ut magna malesuada: vivamus — in sagittis porta tempus: curabitur odio — magna risus, sapien — elementum, maecenas porttitor risus integer.
Urna amet orci auctor elementum, magna justo arcu a auctor bibendum sem proin auctor amet justo metus morbi odio maecenas porttitor. Porta magna integer porttitor tellus eros nec ultricies magna rutrum curabitur, porttitor integer nam, sem non orci non nulla.
</div>
</body>

Hide overflow when scrolling

I'm trying to design a webpage where the page content shows within an iPhone screen but I cannot get the overflow to work correctly in that all overflow is being shown.
function getWidth() {
if (self.innerWidth) {
return self.innerWidth;
}
if (document.documentElement && document.documentElement.clientWidth) {
return document.documentElement.clientWidth;
}
if (document.body) {
return document.body.clientWidth;
}
}
function getHeight() {
if (self.innerHeight) {
return self.innerHeight;
}
if (document.documentElement && document.documentElement.clientHeight) {
return document.documentElement.clientHeight;
}
if (document.body) {
return document.body.clientHeight;
}
}
function setScreen() {
var img = document.getElementById('iphone');
//or however you get a handle to the IMG
var myWidth = getWidth();
var width = String(Math.round(getWidth() / 2 - img.clientWidth / 2 + (img.clientWidth / 525) * 94)) + 'px';
var height = String(Math.round(getHeight() / 2 - img.clientHeight / 2 + (img.clientWidth / 915) * 170)) + 'px';
document.getElementById("screen").style.paddingTop = height;
document.getElementById("screen").style.paddingLeft = width;
document.getElementById("screen").style.paddingRight = width;
document.getElementById("screen").style.paddingBottom = height;
console.log("Image Width: " + img.clientWidth);
console.log("Screen Width: " + myWidth);
console.log("Calculated PaddingLeft: " + width);
}
window.onresize = function() {
setScreen();
}
setScreen();
.screen {
padding-top: 15%;
padding-left: calc(50% - 262px);
position: absolute;
overflow: hidden;
display: block;
}
.phone-image {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
<img src='http://s11.postimg.org/vcchvwjub/iphone.jpg' id='iphone' class="phone-image">
<div id="screen" class="screen">
<p>This is where my text goes and it should now wrap and only show within the phone, I think.</p>
</div>
I've put it in a jsfiddle and would appreciate to know what I've got wrong.
Many thanks

Maybe its work for you.
You need a container for your text and image, and play with relative and absolute positions.
Remember to hide the scrollbar, his width different between browsers and you don't want the text container change his width.
::-webkit-scrollbar {
display: none;
}
body {
font-size: 100%;
padding: 0;
margin: 0;
}
p {
font-size: 0.8em;
}
#container {
position: relative;
width: 50%;
margin: 0 auto;
}
.screen {
overflow: scroll;
width: 60%;
height: 61%;
position: absolute;
top: 14%;
left: 20%;
}
.phone-image {
width: 100%;
display: block;
}
<div id="container">
<img src='http://s11.postimg.org/vcchvwjub/iphone.jpg' id='iphone' class="phone-image">
<div id="screen" class="screen">
<p>This is where my text goes and it should now wrap and only show within the phone, I think.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum purus id nisl tristique condimentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam elementum dui et turpis euismod ullamcorper.
Maecenas id tempus lectus. Duis rutrum lectus ac diam scelerisque posuere. Praesent sit amet auctor tellus, id vestibulum massa. Sed sed leo et nisl lobortis imperdiet eget sed leo.</p>
<p>Nunc augue risus, pharetra in nulla ut, posuere finibus ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse mollis erat mi, vel commodo lorem gravida in. Nulla euismod commodo leo, a egestas dolor
lacinia a. Suspendisse mattis lacus nisi, at consectetur ex auctor sed. Suspendisse potenti. Nunc hendrerit id nisl scelerisque cursus. Etiam suscipit, ipsum mollis volutpat ultricies, turpis arcu feugiat erat, et vulputate mauris velit vel leo.
Aenean ac dolor tempor, sodales nunc consectetur, gravida diam. Nulla sapien ipsum, tempus at vestibulum a, lobortis ut diam. Nam sit amet risus laoreet, mattis ex sed, semper odio. Nam sollicitudin tellus erat, ut vulputate elit bibendum ut.</p>
<p>Integer ultricies non nisi sed ultrices. Aliquam at odio accumsan, tincidunt ex nec, imperdiet magna. Vestibulum ac placerat justo. Nam facilisis tortor in tristique tincidunt. Phasellus tempor lectus eu libero dignissim, nec ultricies leo auctor.
Etiam dui tortor, faucibus id suscipit vel, aliquam non mi. Nulla non ultricies odio. Aenean at metus erat. Pellentesque eget consectetur velit, blandit pellentesque est. Nulla porta mi ligula, sit amet consequat lorem placerat ut. Ut mattis hendrerit
ex, at dapibus enim tincidunt et. Aenean quis nisl at neque porta sagittis sit amet nec mauris. Nullam libero purus, aliquet eu eleifend eget, fermentum a enim.</p>
</div>
</div>
My Fiddle

Fixed div bottom panel when height increase

Please have a look at the following code
https://jsfiddle.net/kamrant/qku5cp1w/1/
#wrapper {
position: relative;
border: 1px solid gray;
height: 100%
}
#panel {
height: 35px;
width: 100%;
position: absolute;
background: #EEEEEE;
bottom: 0;
}
The bottom panel acts fine (stays at the bottom of its container) however I have a tree view inside the container and when the tree is expanded as a result the container height increases, when scroll, my bottom panel stay where it is and does not adjust its position to the bottom of the container.
Any solution for this?

#main {
width: 400px;
float: left;
}
#container {
width: 400px;
float: left;
position: relative;
}
#wrapper {
width: 400px;
float: left;
position: relative;
border: 1px solid gray;
height: 100%;
min-height: 600px;
padding: 0 0 35px 0;
}
#panel {
height: 35px;
width: 100%;
position: absolute;
background: #EEEEEE;
bottom: 1px;
left: 1px;
}
#otherstuff {
height: 100px;
width: 400px;
background: gray;
margin-top: 10px;
float: left;
}
<div id="main">
<div id="container">
<div id="wrapper">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum ligula id neque laoreet lobortis. Nam laoreet ligula nec sapien finibus, interdum efficitur odio sollicitudin. Vivamus vitae erat nibh. Curabitur non magna quis sapien elementum porttitor vel et nulla. Nunc ultricies nisi quis eros ullamcorper, vitae malesuada velit venenatis. Suspendisse ultricies justo non ipsum pellentesque, eu consectetur massa ultricies. Morbi vel euismod erat, in condimentum elit. Aenean blandit mi ut nulla convallis, nec pellentesque mi facilisis. Sed vitae viverra mi, eu dapibus magna. Sed sollicitudin, velit sit amet tristique placerat, ante massa semper mi, id ultrices elit libero sit amet velit. Vivamus vitae lorem pretium nulla iaculis aliquet. Duis elementum erat vel pretium viverra. Phasellus ac ante quis tortor sollicitudin tristique. Ut tellus sem, congue sed arcu nec, venenatis efficitur risus. Curabitur ullamcorper viverra sapien ut maximus. Quisque ac elit finibus, fringilla diam ac, fermentum sapien.<br /><br />
Donec mattis sapien quis risus dictum aliquet. Etiam tristique tristique ex ut pharetra. Nulla vehicula tempor mauris ac ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu varius dui. Curabitur ornare nibh hendrerit eros lacinia semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean turpis dolor, posuere sit amet sapien quis, luctus viverra leo. Vivamus auctor, lorem et tempus fermentum, lorem velit ultrices nisi, ac bibendum felis ante vel erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet vitae mauris nec fermentum. asd
</div>
<div id="panel">do stuff</div>
</div>
<div id="otherstuff"></div>
</div>
Try this.

You have set the height of the container to 600px (I changed it to 100 for easier viewing on jsfiddle) which restricts the growth. Would be better use to use min-height, allowing div height to grow as content grows.
I suggest putting content inside its own div, so I made a new div ("tree") to contain the tree view you were talking about. This allows you to target just the content of this div in the future, should it come to that.
When you have an absolute position, it will take up the the space the inside which the div it belongs to, hence the extra padding inside the .tree css to allow for that content to not overlap the "tree" div.
#container {
min-height: 100px;
width: 400px;
}
See jsfiddle for the full code https://jsfiddle.net/jennift/qku5cp1w/4/

anchor link to multiple classes instead of id's with jquery

I have a page with up and down arrows that are links that float on the left. I want them to navigate between div's on the page as a scrolling anchor links. Here is what I have so far.....I know the jquery is far from complete but I think im going in the right direction. Any help would be great.
JSFIDDLE: http://jsfiddle.net/t8uaQ/
HTML:
<ul id="et-float-menu">
<li class="et-float-menu-item1">
<span><img></span>
</li>
<li class="et-float-menu-item2">
<span><img></span>
</li>
</ul>
<div class="jumptosection" id="section1">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>
<p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>
<div class="jumptosection" id="section2">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>
<p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>
<div class="jumptosection" id="section3">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>
<p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>
<div class="jumptosection" id="section4">
<h2>Section 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>
<p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>
MY CSS:
#section1 {
padding:20px;
margin:10px;
background-color:#f8f8f8;
}
#section2 {
padding:20px;
margin:10px;
background-color:#e8e8e8;
}
#section3 {
padding:20px;
margin:10px;
background-color:#f8f8f8;
}
#section4 {
padding:20px;
margin:10px;
background-color:#e8e8e8;
}
#et-float-menu {
position: fixed;
z-index: 11;
left: 0;
top: 45%;
background-color: #000;
padding: 20px 10px 10px 15px;
margin: 0;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
#et-float-menu a {
padding: 0;
clear: both;
float: left;
margin-bottom: 10px;
color: #fff;
}
#et-float-menu a:hover { color: #b2b2b2; transition: color 300ms ease 0s; }
#et-float-menu li {
display: block;
margin-left: 0;
}
.et-float-menu-item a { display: inline-block; font-size: 24px; position: relative; text-align: center; transition: color 300ms ease 0s; color: #fff; text-decoration: none; }
.et-float-menu-item a:hover { color: #a0a0a0; }
.et-social-icon span { display: none; }
.et-float-menu-item1 a:before { content: '↑';font-size:22px; }
.et-float-menu-item2 a:before { content: '↓';font-size:22px; }
JQUERY:
jQuery(document).ready(function(){
var jumptosectionTopPosition = jQuery('.jumptosection').offset().top;
jQuery('#scroll').click(function(){
jQuery('html, body').animate({scrollTop:jumptosectionTopPosition}, 'slow');
return false;
});
});

Change hrefs of your <a> to scrollUp and scrollDown correspondingly.
Stick to some .selected class, which will be used for identifying current selected section.
Add this class to the first section in html.
Add a function that will perform selection: by adding .selected class and scrolling to newly selected div.
function changeSelection(sectionFrom, sectionTo) {
if(sectionTo.length > 0) {
sectionFrom.removeClass("selected");
sectionTo.addClass("selected");
$("body").animate({scrollTop: sectionTo.offset().top});
}
}
Attach click listeners to your anchors. Inside each of them find current selected div and div you want to be selected and call changeSelection() using these divs.
For scrollDown we want to select the next div:
$(document).on("click", "[href='#scrollDown']", function(){
var currentSection = $(".selected");
var nextSection = currentSection.next(".jumptosection");
changeSelection(currentSection, nextSection);
return false;
});
For scrollUp we want to select the previous div:
$(document).on("click", "[href='#scrollUp']", function(){
var currentSection = $(".selected");
var prevSection = currentSection.prev(".jumptosection");
changeSelection(currentSection, prevSection);
return false;
});
In case you reach the end (the first or the last .jumptosection div), nothing will be changed (it is controlled by the changeSelection function - it checks do we have sectionWeWantScrollTo)
Here is the Demo
Edited (for http://94co.com/client3/about/)
See this answer about WordPress and jQuery. Use jQuery instead of
$ in your script
It is better to use id instead of href on anchor
Make sure you wrap JavaScript of click listeners in
jQuery(document).ready(function(){
/*scrollUp and scrollDown click listeners should be here*/
});
(JSFiddle makes this wrap automatically). changeSelection function doesn't need to be wrapped
Here is the updated Demo

You can set some initial var that let you know the start point like this:
var pre = $('.et-float-menu-item1'),
nex = $('.et-float-menu-item2'),
act = $('#section1');
Where act is the start
And then evaluate prev and next elements:
nex.click(function(){
pre.slideDown();
var gt = act.next('div').offset().top;
$('body').animate({scrollTop : gt},'slow');
act = act.next('div');
})
pre.click(function(){
var gt = act.prev('div').offset().top;
$('body').animate({scrollTop : gt},'slow');
act = act.prev('div');
})
This code can be improved but is the first aproach I can give.
Check the Demo Fiddle