Develop Reference

Using CSS to wrap text around image and have it behave like a background image

I'm using shape-outside to give a "magazine" feel to a website. Each page has a new image of a person and the text wraps around that person. Shape outside works perfectly and easy! Only issue is that I can't figure out how to make it so the text in one column (left) sets the height not the image (right).
Take this example:
https://jsfiddle.net/kvzmw0sy/22/
Or the raw code
HTML:
<div class="container">
<img class="image" src="https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus orci nec iaculis. Cras tempor aliquam sem, id accumsan nibh mollis nec. Sed eget dui pulvinar, iaculis nibh vitae, molestie metus. Aliquam tortor leo, laoreet a felis quis, ultricies dignissim mauris. Etiam quis consectetur nibh. In sodales et ex at malesuada. Phasellus et arcu eleifend, interdum ex eu, bibendum magna.
</div>
</div>
<div class="footer">
</div>
CSS:
.image {
float: right;
max-width: 200px;
height: auto;
shape-outside: url(https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png);
}
.footer {
width:100%;
height:50px;
border: 2px solid green
}
What I get is this:
But, what I want is this (see how the image goes behind the footer):
Essentially I want it to work like a background image.
I tried position absolute but it breaks the text wrapping. I don't think i can do this with a background image. And so the only solution I have so far is to use JS to get the height on the left and apply it to the container with an overflow:hidden which I'd really like to avoid.

the new overflow:clip applied to the container will do the job
.image {
float: right;
max-width: 200px;
height: auto;
shape-outside: url(https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png);
}
.footer {
width: 100%;
height: 50px;
border: 2px solid green
}
/* .text{
shape-outside: url(https://www.pngjoy.com/pngl/69/1501951_stars-star-images-birthday-png-hd-png-download.png);
} */
.container {
overflow: clip;
}
<div class="container">
<img class="image" src="https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus orci nec iaculis. Cras tempor aliquam sem, id accumsan nibh mollis nec. Sed eget dui pulvinar, iaculis nibh vitae, molestie metus. Aliquam tortor leo, laoreet a felis
quis, ultricies dignissim mauris. Etiam quis consectetur nibh. In sodales et ex at malesuada. Phasellus et arcu eleifend, interdum ex eu, bibendum magna.
</div>
</div>
<div class="footer">
</div>
For better support you can rely on clip-path instead:
.image {
float: right;
max-width: 200px;
height: auto;
shape-outside: url(https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png);
}
.footer {
width: 100%;
height: 50px;
border: 2px solid green
}
.container {
clip-path: inset(0);
}
<div class="container">
<img class="image" src="https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus orci nec iaculis. Cras tempor aliquam sem, id accumsan nibh mollis nec. Sed eget dui pulvinar, iaculis nibh vitae, molestie metus. Aliquam tortor leo, laoreet a felis
quis, ultricies dignissim mauris. Etiam quis consectetur nibh. In sodales et ex at malesuada. Phasellus et arcu eleifend, interdum ex eu, bibendum magna.
</div>
</div>
<div class="footer">
</div>

CSS Remove white gaps above floated elements

I am trying to build this layout:
I used float: left for the boxes in the left side and float: right for the ones in the right.
The problem is that every right-floated box is aligning it's top with the the previous left-floated element.
Thus all I get is this:
HTML:
I need to keep the elements in this order (box1, box2, ... box7)
<div class="container">
<div class="box box1 left green">
BOX 1 (big) Lorem ipsum (...)
</div>
<div class="box box2 right orange">
BOX 2 (small)
</div>
<div class="box box3 right blue">
BOX 3 (small)
</div>
<div class="box box4 left pink">
BOX 4 (big) Lorem ipsum (...)
</div>
<div class="box box5 right yellow">
BOX 5 (small)
</div>
<div class="box box6 left teal">
BOX 6 (big) Lorem ipsum (...)
</div>
<div class="box box7 right purple">
BOX 7 (small)
</div>
</div>
DEMO: https://codepen.io/constagorgan/pen/vjLJzG
Other considerations:
On smaller devices the boxes should be merged in a single column, same as using col-*-12 in Bootstrap, but keeping same ordering (box1, box2, ... box7)
I can use Bootstrap, Masonry, Bulma or other library that helps building grids / layouts as long as it's supported by IE11, Chrome and Firefox
A CSS-only solution would be absolutely fantastic.
I don't want to use display: table. Reasons for this are given here.
What I've tried so far:
Using Bootstrap → I cannot make it responsive for small screens without moving things around inside the DOM.
Using Masonry → I couldn't find a way to order the boxes. They are just positioning themselves in the closest available place.
Using flex → I got stuck in a similar situation.
Using CSS grid layout → It's not fully supported on IE11.
Using CSS columns → I need a 70%|30% ratio. This is designed for 50%|50%.
How can I remove those white gaps from the layout? Can I achieve this with floated elements? If not, what's the proper way to do it?
EDIT:
I need to make it responsive. On smaller screen I need to stick with this one-column layout (as I mentioned in the "Other considerations" section.

If you combine Flexbox and float, you can do like this, where on narrower screens make use of the Flexbox property order.
By initially add the smaller elements first, you can simply float and clear them and they will align right, in a column of their own.
When the media query kicks in, remove float, add display: flex and order them 1-7.
Updated codepen
Stack snippet
.left {
width: 75%;
}
.right {
float: right;
width: 25%;
clear: right
}
.green { background-color: #90EE90; }
.blue { background-color: #20B2AA; }
.orange { background-color: #FFA07A; }
.pink { background-color: #FFB6C1; }
.yellow { background-color: #FFD700; }
.teal { background-color: #00CED1; }
.purple { background-color: #9370DB; }
#media (max-width: 500px) {
.left, .right {
float: none;
width: 100%;
}
.container {
display: flex;
flex-direction: column;
}
.container .box1 { order: 1 }
.container .box2 { order: 2 }
.container .box3 { order: 3 }
.container .box4 { order: 4 }
.container .box5 { order: 5 }
.container .box6 { order: 6 }
.container .box7 { order: 7 }
}
<div class="container">
<div class="box box2 right orange">
BOX 2 (small)
</div>
<div class="box box3 right blue">
BOX 3 (small)
</div>
<div class="box box5 right yellow">
BOX 5 (small)
</div>
<div class="box box7 right purple">
BOX 7 (small)
</div>
<div class="box box1 left green">
BOX 1 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum. Integer luctus dolor quis condimentum mollis.
</div>
<div class="box box4 left pink">
BOX 4 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum.
</div>
<div class="box box6 left teal">
BOX 6 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci in, efficitur pulvinar ipsum.
</div>
</div>
If you can't change markup, you need script, where you either hook up on the resize event, or as here, the window.matchMedia event.
Stack snippet
document.addEventListener("DOMContentLoaded", function(event) {
var container = document.querySelector('.container');
var items = document.querySelectorAll('.container .box');
var reorderitems = function(matched) {
if (matched) {
container.appendChild(items[0]);
container.appendChild(items[3]);
container.appendChild(items[5]);
} else {
container.insertBefore(items[2], items[3]);
container.insertBefore(items[1], items[2]);
container.insertBefore(items[4], items[5]);
container.appendChild(items[6]);
}
}
reorderitems(window.outerWidth > 500);
window.matchMedia("(min-width: 501px)").addListener(function(e) {
if (e.matches) {
reorderitems(true);
} else {
reorderitems(false);
}
});
});
.left {
width: 75%;
}
.right {
float: right;
width: 25%;
clear: right
}
.green {
background-color: #90EE90;
}
.blue {
background-color: #20B2AA;
}
.orange {
background-color: #FFA07A;
}
.pink {
background-color: #FFB6C1;
}
.yellow {
background-color: #FFD700;
}
.teal {
background-color: #00CED1;
}
.purple {
background-color: #9370DB;
}
#media (max-width: 500px) {
.left,
.right {
float: none;
width: 100%;
}
}
<div class="container">
<div class="box box1 left green">
BOX 1 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci
in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum. Integer luctus dolor quis condimentum mollis.
</div>
<div class="box box2 right orange">
BOX 2 (small)
</div>
<div class="box box3 right blue">
BOX 3 (small)
</div>
<div class="box box4 left pink">
BOX 4 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci
in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum.
</div>
<div class="box box5 right yellow">
BOX 5 (small)
</div>
<div class="box box6 left teal">
BOX 6 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci
in, efficitur pulvinar ipsum.
</div>
<div class="box box7 right purple">
BOX 7 (small)
</div>
</div>

You need to create two new Divs to group the boxes at each side:
<div class="container">
<div class="group box left">
<div class="box box1 green">
BOX 1 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum. Integer luctus dolor quis condimentum mollis.
</div>
<div class="box box4 pink">
BOX 4 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum.
</div>
<div class="box box6 teal">
BOX 6 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci in, efficitur pulvinar ipsum.
</div>
</div>
<div class="group box right">
<div class="box box2 orange">
BOX 2 (small)
</div>
<div class="box box3 blue">
BOX 3 (small)
</div>
<div class="box box5 yellow">
BOX 5 (small)
</div>
<div class="box box7 purple">
BOX 7 (small)
</div>
</div>
</div>

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>

Cover full screen with div - RWD overflow's

I try to make info block which will slide up after button is clicked and will cover entire available screen. I encounter problem with smaller device, text overflow sliding div. Can i ask you for some solution ?
You can find working example here : http://codepen.io/anon/pen/yYxOwe
HTML
<nav class="navbar navbar-default navbar-fixed-top container-fluid">
<div class="navbar-header">
<button id="more-info" href="#about" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<figure id ="logo">
<img class="navbar-brand" src="http://cleartheairchicago.com/files/2014/06/logo-placeholder.jpg" alt="logo" title="logo" width="150px" />
<figcaption>Under construction page</figcaption>
</figure>
</div>
</nav>
<!-- About Page-->
<div id="about" class="top-tab offscreen container-fluid col-md-12">
<section class="col-md-4">
<h1>About Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non turpis ut enim consequat elementum et a lectus. Cras dui massa, condimentum non arcu non, pretium gravida sem. Maecenas at mattis ipsum. Aliquam erat volutpat. Donec nec nibh sed odio euismod pellentesque non vitae purus. Aenean pretium varius erat sit amet fringilla. Phasellus ac justo nibh. Donec suscipit est vel euismod facilisis. Maecenas accumsan nunc eget nunc tempor ornare.</p>
</section>
<section class="col-md-4">
<h1>What we offer</h1>
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non turpis ut enim consequat elementum et a lectus. Cras dui massa, condimentum non arcu non, pretium gravida sem. Maecenas at mattis ipsum. Aliquam erat volutpat. Donec nec nibh sed odio euismod pellentesque non vitae purus. Aenean pretium varius erat sit amet fringilla. Phasellus ac justo nibh. Donec suscipit est vel euismod facilisis. Maecenas accumsan nunc eget nunc tempor ornare.</p>
</section>
<section class="col-md-4">
<h1>Contact Us</h1>
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non turpis ut enim consequat elementum et a lectus. Cras dui massa, condimentum non arcu non, pretium gravida sem. Maecenas at mattis ipsum. Aliquam erat volutpat. Donec nec nibh sed odio euismod pellentesque non vitae purus. Aenean pretium varius erat sit amet fringilla. Phasellus ac justo nibh. Donec suscipit est vel euismod facilisis. Maecenas accumsan nunc eget nunc tempor ornare.</p>
</section>
</div>
CSS
body {background-color: blue;}
.top-tab {
position: absolute;
transition: 0.5s all;
top: 0;
background-color:white;
opacity:0.85;
height: 100%;
padding-top: 4%;
}
.offscreen {top: -9999px;}
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
JS
$(function() {
$("#more-info").click(function(event) {
var href=$(this).attr('href');
$(href).toggleClass('offscreen');
event.preventDefault()
});
});

Just add overflow:auto; to your .top-tab class in your CSS.
Edit in Following part of code:
.top-tab {
position: absolute;
transition: 0.5s all;
top: 0;
background-color:white;
opacity:0.85;
height: 100%;
padding-top: 4%;
overflow:auto; /* ADDED */
}

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