Develop Reference

Display other div on button hover with transition

I'm really struggling to make my head around transitions. I've got a round button and I would like the div to show when the button is hovered. But I would like to have and "(un)fold" effect. Could you help me to add the animation to this css?
var btn = document.getElementById("open_feedback_form");
var x = document.getElementById("title");
btn.addEventListener("click", function() {
if (x.style.visibility === 'hidden') {
x.style.visibility = 'visible';
} else {
x.style.visibility = 'hidden';
}
});
.help_button {
position: fixed;
bottom: 10rem;
right: 10rem;
width: 5rem;
height: 5rem;
border-radius: 50%;
border: none;
box-shadow: 0 0 0 10px rgba(243, 147, 37, 0.4);
background-color: #F39325;
font-style: normal;
font-weight: 600;
font-size: 1.6rem;
line-height: 150%;
color: #ffffff;
}
.feedback-title {
position: fixed;
bottom: 10rem;
right: 12.5rem;
height: 5rem;
background-color: #F39325;
color: #ffffff;
font-size: 1.6rem;
line-height: 5rem;
padding-right:2.5rem;
padding-left:1rem;
visibility: hidden;
}
<div class="feedback-title" id="title">Feedback form</div>
<button class="help_button" aria-label="help and feedback form" id="open_feedback_form">
?
</button>
I'm not even sure whether my approach here is correct.

Best practice for an unfold effect should be using the transform 3d properties. Wrap the feedback form in a container and transform the inner element from 100% from the x-as to 0%.

* {
margin: 0;
padding: 0;
}
.button-wrapper {
position: relative;
display: inline-block;
margin: 50px;
cursor: pointer;
}
.button-helper {
white-space: nowrap;
position: absolute;
right: 0;
top: 50%;
z-index: -1;
transform: translate3d(0, -50%, 0);
transition: .5s ease;
}
.button {
padding: 10px 30px;
}
.button-wrapper:hover .button-helper {
transform: translate3d(calc(100% + 15px), -50%, 0);
}
<button class="button-wrapper" type="button">
<p class="button-helper">Button info label</p>
<div class="button">
button text
</div>
</button>

Here is how could do it only with CSS and HTML:
body{
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
}
.help_button {
display:block;
box-sizing:border-box;
position: relative;
width: 5rem;
height: 5rem;
border-radius: 50%;
border: none;
box-shadow: 0 0 0 10px rgba(243, 147, 37, 0.4);
background-color: #F39325;
font-style: normal;
font-weight: 600;
font-size: 1.6rem;
color: #ffffff;
}
.feedback-title {
position: absolute;
right:2.3rem;
top:0;
height: 100%
transform:translate(-5px, -5px);
background-color: #F39325;
color: #ffffff;
font-size: 1.6rem;
line-height: 5rem;
padding-right:2.5rem;
padding-left:1rem;
z-index:-1;
opacity:0;
transition : .5s ease;
width:12rem;
}
.help_button:hover .feedback-title {
opacity:1;
}
<button class="help_button" aria-label="help and feedback form" id="open_feedback_form">
?
<span id="title" class="feedback-title">Feedback from</span>
</button>

Why my font color in navbar didn't change when i toggle to sticky?

I'm still new to css and tried to make a sticky navbar with background of white color and black font. I'm struggling to find the solution and can't figure out what's wrong.
Here's my what my initial navbar looks like
initial navbar
And here's scrolled navbar
Scrolled Navbar
The picture isn't clear but the font is still white with a little black outline even though i changed the font color to black
Here's my HTML code:
<header id='navbar'>
LOGO
<div class="menu">
<div class="btn">
<i class="fas fa-times close-btn"></i>
</div>
Jadi Partner
Lapangan Favorit
Pesanan Saya
<div class="dropdown">
<button class="dropbtn">
<i class="fas fa-bars" id="menu-dropdown"></i><i class="fas fa-user-circle"></i>
</button>
<div class="dropdown-content">
Log In
Sign Up
</div>
</div>
</div>
<div class="btn">
<i class="fas fa-bars menu-btn"></i>
</div>
</header>
<script type="text/javascript">
window.addEventListener('scroll', function () {
// var header = document.querySelector('header');
var header = document.querySelector('header');
header.classList.toggle('sticky', window.scrollY > 0);
})
</script>
<script type="text/javascript">
//Javacript of responsive navigation menu
const menuBtn = document.querySelector(".menu-btn");
const navigation = document.querySelector(".navigation");
menuBtn.addEventListener("click", () => {
menuBtn.classList.toggle("active");
navigation.classList.toggle("active");
});
</script>
and this is the CSS part:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
header{
z-index: 999;
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 100px;
transition: 0.6s;
}
header.sticky {
background: #ffffff;
padding: 20px 100px;
}
header .brand{
color: #fff;
font-size: 30px;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
}
header .menu{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header .menu a{
color: rgb(255, 255, 255);
font-size: 16px;
font-weight: 500;
text-decoration: none;
margin: 0 30px;
padding: 0 10px;
border-radius: 20px;
transition: 0.3s;
transition-property: color, background;
}
header.sticky .menu a{
color: black !important;
z-index: 9999999;
}
header .menu a:hover{
color: #000;
background: #fff;
}
header .btn{
color: #fff;
font-size: 25px;
cursor: pointer;
display: none;
}
.dropdown {
float: right;
position: relative;
/* overflow: hidden; */
margin-left: 10px;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
font-family: inherit;
margin-left: 20px;
color: black;
background-color: #fff;
border-radius: 30px;
padding: 0 3px;
}
.dropdown-content {
display: none;
position: absolute;
top: calc(100%);
right: 0;
background-color: #ffffff;
max-width: 160px;
/* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
z-index: 9999;
border-radius: 10px;
}
.dropdown-content a {
/* float: none; */
color: black !important;
margin: 5px 0 !important;
padding: 6px 10px;
min-width: 120px;
text-decoration: none;
display: inline-block;
font-size: .8em !important;
/* text-align: left; */
/* overflow: hidden; */
}
.dropdown-content a:hover {
background-color: rgb(212, 212, 212);
}
.dropdown:hover .dropdown-content {
display: block;
}
.navigation-items {
display: flex;
justify-content: center;
align-items: center;
}
header .navigation .navigation-items #profile-dropdown {
color: black;
background-color: #fff;
border-radius: 30px;
padding: 0 3px;
}
.dropbtn i {
margin: 0 3px;
}
#menu-dropdown {
font-size: .7em;
}
header ul li a:before {
content: '';
position: absolute;
background: rgb(255, 255, 255);
border-color: #000000;
width: 0;
height: 3px;
bottom: 0;
left: 0;
transition: 0.3s ease;
}
header ul li a:hover:before {
width: 100%;
}
This part is edited
I found out that with only navbar it works perfectly fine, but the problem occure when i add background image below navbar. Here's my background code below navbar:
<section class="home">
<div class="images-home">
<img src="{% static 'main/images/basketball.jfif' %}" alt="" class="image-slide">
<img src="{% static 'main/images/prapoth-panchuea-OMWubltUEfE-unsplash.jpg' %}" alt="" class="image-slide">
<img src="{% static 'main/images/muktasim-azlan-rjWfNR_AC5g-unsplash.jpg' %}" alt="" class="image-slide">
</div>
<div class="content">
<h1>Train. Grow. Repeat.<br></h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores magnam quia vitae, animi unde consequuntur
nihil doloribus quidem culpa, voluptatem, harum consequatur laboriosam delectus officia!</p>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span> Booking sekarang</a>
</div>
<div class="slider-navigation">
<div onclick="slider_nav(1)" class="nav-btn" id="radio1"></div>
<div onclick="slider_nav(2)" class="nav-btn" id="radio2"></div>
<div onclick="slider_nav(3)" class="nav-btn" id="radio3"></div>
</div>
</section>
and here's CSS for background:
section {
padding: 100px 200px;
}
.home {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
flex-direction: column;
/* background: #267be9; */
background: #ED1E1E;
}
.home:before {
z-index: 777;
content: '';
position: absolute;
/* background: rgba(62, 129, 245, 0.3); */
background: rgba(212, 11, 11, 0.3);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.home .content {
z-index: 888;
/* color: #fff; */
color: #fff;
width: 60%;
margin: 50px 70px;
position: absolute;
left: 0%;
}
.home .content h1 {
font-size: 3.5em;
font-weight: 700;
/* text-transform: uppercase; */
letter-spacing: 5px;
line-height: 75px;
margin-bottom: 40px;
}
.home .content p {
margin-bottom: 65px;
max-width: 50%;
/* font-size: 1.2vw; */
}
.home .content a {
/* background: #fff; */
width: 30%;
background: #ED1E1E;
padding: 15px 35px;
/* color: #1680AC; */
/* color: #ED1E1E; */
color: #ffffff;
/* font-size: 1.1em; */
font-size: 1.4vw;
font-weight: 500;
text-decoration: none;
text-transform: uppercase;
position: relative;
/* display: flex; */
}
.home .content a:hover {
color: var(--main-color);
background-color: #fff;
}
.home .content a span {
display: block;
position: absolute;
background: var(--main-color);
}
.home .content a span:nth-child(1) {
left: 0;
bottom: 0;
width: 2px;
height: 100%;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.5s;
}
.home .content a:hover span:nth-child(1) {
transform: scaleY(1);
transform-origin: bottom;
transition: transform 0.5s;
}
.home .content a span:nth-child(2) {
left: 0;
bottom: 0;
width: 100%;
height: 2px;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
}
.home .content a:hover span:nth-child(2) {
transform: scaleX(1);
transform-origin: left;
transition: transform 0.5s;
}
.home .content a span:nth-child(3) {
right: 0;
bottom: 0;
width: 2px;
height: 100%;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home .content a:hover span:nth-child(3) {
transform: scaleY(1);
transform-origin: bottom;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home .content a span:nth-child(4) {
left: 0;
top: 0;
width: 100%;
height: 2px;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home .content a:hover span:nth-child(4) {
transform: scaleX(1);
transform-origin: left;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home img {
z-index: 000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.home .media-icons {
z-index: 888;
position: absolute;
right: 30px;
display: flex;
flex-direction: column;
transition: 0.5s ease;
}
.home .media-icons a {
color: #fff;
font-size: 1.6em;
transition: 0.3s ease;
}
.home .media-icons a:not(:last-child) {
margin-bottom: 20px;
}
.home .media-icons a:hover {
transform: scale(1.3);
}
.slider-navigation {
z-index: 888;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
/* transform: translateY(80px); */
/* margin-bottom: 12px; */
bottom: 5%;
left: 50%;
transform: translateX(-50%);
}
.slider-navigation .nav-btn {
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
transition: 0.3s ease;
}
.slider-navigation .nav-btn:not(:last-child) {
margin-right: 20px;
}
.slider-navigation .nav-btn:hover {
transform: scale(1.2);
}
.slider-navigation .nav-btn.active {
background: var(--main-color);
}
#media (max-width: 1040px) {
section {
padding: 100px 20px;
}
.home .content {
margin: 0 20px;
}
.home .media-icons {
right: 15px;
}
.home .content h1 {
font-size: 4vw;
line-height: 60px;
}
.home .content p {
margin-bottom: 65px;
max-width: 40%;
font-size: 13px;
}
}
#media (max-width: 560px) {
.home .content {
margin: 0 20px;
}
.home .content h1 {
/* font-size: 2em; */
line-height: 60px;
}
.home .content p {
margin-bottom: 65px;
max-width: 40%;
font-size: 10px;
}
.home .content a {
max-width: 10px;
padding: 10px 25px;
}
}
I read something about !important, but it dind't help. Thank you for anyone who are willing to help an amateur like me :)

You need to add background-color and color property to the header selector not header .sticky.
As you're dynamically adding the sticky class, so at first render the colors are not actually visible.
UPDATE
Checked your codepen and you're missing the property when .sticky class is applied via JS
header.sticky .dropdown .dropbtn {
background-color: #000;
}
header.sticky .brand{
color: #000;
}

How to achieve a card slide in animation?

Please take a look at the following basic example:
html,
body {
height: 100%;
}
body {
margin: 0;
}
.sidebar {
height: 100%;
width: 300px;
background-color: pink;
float: left;
}
.students-list {
height: 100%;
width: 200px;
background-color: skyblue;
float: left;
}
<div class="sidebar">
Students List
</div>
<div class="students-list">
</div>
The pink div is a sidebar with a link. at first the second div which is the skyblue one, should be hidden, and when the user clicks on the link the whole div should slide smoothly from the left (From underneath the pink div).
Do any of you have a tip or can help me out how to achieve the animation?
EDIT: Is it possible to also use another button to slide out even a third div to the right of the second div?

Please check the below code
body {
font-family: "Roboto", sans-serif;
font-size: 18px;
overflow-x: hidden;
}
main {
padding: 40px 25px;
transition: .5s ease-in-out;
width: 100%;
}
nav {
background: #36a;
bottom: 0;
box-shadow: 0 0 5px #666;
height: 100%;
left: -17.5rem;
padding-top: 38px;
position: absolute;
top: 0;
transition: .5s ease-in-out;
width: 17rem;
user-select: none;
}
nav a {
color: #eee;
display: block;
padding: 12px 16px;
transition: .5s;
text-decoration: none;
-webkit-user-drag: none;
}
nav a:hover {
background-color: #39c;
}
#nav-collapse {
padding: 8px 12px;
position: absolute;
right: 0;
top: 0;
}
#nav-expand {
background-color: #333;
color: #eee;
display: block;
left: 0;
top: 0;
padding: 8px 12px;
position: absolute;
text-decoration: none;
transition: .5s linear;
user-select: none;
-webkit-user-drag: none;
}
#nav-expand:focus {
opacity: 0;
}
#nav-expand:focus ~ main {
margin-left: 17rem;
transition-delay: .25s;
}
#nav-expand:focus ~ nav {
left: 0;
transition-delay: .25s;
}
#nav-expand:hover {
background-color: #369;
color: #fff;
}
.icon {
display: inline-block;
background-position: center;
background-repeat: no-repeat;
height: 12px;
width: 12px;
}
.icon-cross {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABHNCSVQICAgIfAhkiAAAAPdJREFUGJV1jz9LhWAYxc+9rVZDQ+DcEI0NLU19gxr6Ci3tuvjnA+gggSBt4qzzO90b5FBubkHgEM1CBL5K93Ia8jWv4G88/A7PeQAArusekXwRQpiGYSzQ4/v+Gcn3OI6vMRJf+cdWFXrxs8+bOI5vkCTJLckf/rMtiuJhJJIk67oWAIA0Te8mhR2klGvbtg/UvNlC27ZPSlwquaqqZwA1dmGe56uu676HxPO8U5IfMyuGp+fEt+nTQghzqWnaMYBDdUVKuXYc5yLLsnsAmz5e6Lp+AgCIouiK5FfTNCvLsvanT5dl+Wia5t6wOwiC87GoCMPwUom/I2EVwEqOzwUAAAAASUVORK5CYII=');
}
.icon-menu {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAB5JREFUKJFj/P///38GEgATKYoHKWAc9TQRgGRPAwD0IAv+FT8LPwAAAABJRU5ErkJggg==');
}
<a id="nav-expand" href="#">
<span class="icon icon-menu"></span>
Menu
</a>
<nav>
<a id="nav-collapse" href="#">
<span class="icon icon-cross"></span>
</a>
Link1
Link2
Link3
Link4
</nav>
<main>
<h2>Push Sidebar Exmaple</h2>
<p>Please click on menu button.</p>
</main>

html css js Keep sidebar with drop down links open on different pages

I am working on a portfolio website of my OJT experience. It's a project that is due 3 days and nearly complete.
My problem is that I'd like to keep the sidebar navigation open as well as the drop down links when I open a different page. For example, if I am on the Home page and I clicked the Rationale page on the sidebar, I'm taken to the Rationale page with the sidebar and drop down still open from the previous page (Home page in this example). I need the same for every page. If I can, I'd like to keep the current codes as much as possible, with just the new codes added on.
Sorry if the codes are messy, I had to relearn HTML and CSS for this project since I'm not very familiar and don't have much experience with web developing. Thank you.
HTML sidebar and dropdown
<div class="sidebar">
<nav id='navigation' class="navigation">
<div id="menuToggle" class="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<button class="dropdown-btn">Introduction
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
Rationale
Work Expectation
Contact Details
Company Profile
Company Size
Nature of Business
Divisions/Departments
Organizational Chart
Pictures of the Company
</div>
<button class="dropdown-btn">Observation
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
SWOT Analysis
Overall Observation
</div>
<button class="dropdown-btn">Anecdotal Reports
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
Periodic Reports
Professional Experiences and Training
Tasks and Assignments
Problems Encountered
Outstanding Achievements
Salient Practices
Relevance of the Chosen Training
Overall Experiences
</div>
<button class="dropdown-btn">Appendix
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
Practicum Recommendation Letter
Agreement & Liability Waiver
Performance Evaluation Report
Certificate of Hours Worked
Attendance Summary
Pictures while in Actual Work
Professional Resume
</div>
</ul>
</div>
</nav>
<script src="intro.js"></script>
</div>
CSS to style the sidebar
#menu a{
padding:10px 10px 10px 30px;
text-decoration:none;
font-size:20px;
color:#fff;
display:block;
transition: color 0.3s ease;
}
#menu a:hover{
color:rgb(153, 153, 153);
}
#menuToggle::before{
/* display:block;
position: absolute;
content: "OJT Portfolio";
width:144px;
font-size: 18px;
color:#f2f2f2;
top: 1px;
right: 44px; */
}
#menuToggle
{
display: block;
position: absolute;
top: 22px;
right: 22px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
#menuToggle span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child
{
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2)
{
opacity: 1;
transform: rotate(-45deg) translate(0, -1px);
}
#menu
{
position: absolute;
height: 100vh;
width: 300px;
padding-bottom: 100%;
margin: -100px 0 0 0;
padding: 40px;
padding-top: 167px;
padding-left: 20px;
right: -60px;
background: #181818;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 10px 0;
/* padding:0 10px 0 0; */
font-size: 22px;
}
#menuToggle input:checked ~ ul
{
transform: scale(1.0, 1.0);
opacity: 1;
}
.dropdown-btn {
font-family: 'Anonymous Pro', monospace;
padding: 22px 22px 22px 22px;
text-decoration: none;
font-size: 22px;
color: #ffffff;
display: block;
border: none;
background: none;
width:100%;
text-align: left;
cursor: pointer;
outline: none;
}
.sidenav a:hover, .dropdown-btn:hover {
color: #818181;
}
.active {
background-color: #2e2e2e;
color: white;
}
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
}
.fa-caret-down {
float: right;
padding-right: 8px;
}

alert only if i click the icon not the whole row

I want to get an alert when i click the icon not the whole row but for some reason I am getting it on the whole row. What am I doing wrong?
<div class="footer">
<span id="scroll-top">
<i class="fa fa-round fa-chevron-up"></i>
</span>
</div>
.footer {
background-color: black;
color: white;
padding-top: 40px;
}
.footer .fa-round {
padding: 0;
border-radius: 50%;
color: white;
background-color: red;
font-size: 1.3em;
line-height: 1.6em;
height: 34px;
width: 34px;
}
.footer #scroll-top {
display: block;
cursor: pointer;
z-index: 99999999;
text-align: center;
position: relative;
top: -50px;
}
http://jsfiddle.net/hgu02x0b/1/

You have the span element displayed as block so it is covering the container width. you can take this out and text-align all children elements in .footer in the center
$("#scroll-top").click(function() {
alert('test');
});
.footer {
background-color: black;
color: white;
padding-top: 40px;
}
.footer .fa-round {
padding: 0;
border-radius: 50%;
color: white;
background-color: red;
font-size: 1.3em;
line-height: 1.6em;
height: 34px;
width: 34px;
}
.footer #scroll-top {
cursor: pointer;
z-index: 99999999;
text-align: center;
position: relative;
top: -50px;
display: inline-block;
position: relative;
left: 50%;
-moz-transform: translate(-50%, 0%);
-webkit-transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%);
-o-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer">
<span id="scroll-top">
<i class="fa fa-round fa-chevron-up"></i>
</span>
</div>

You gave the <span id="scroll-top"> element display: block, which makes it take full width.
So if you change your click handler to $("i.fa-chevron-up").click(...) it will work
Updated fiddle
Or you can change <span id="scroll-top"> to display: inline-block and set text-align: center on the footer
Updated fiddle
Or, since the icon has a fixed width, give <span id="scroll-top"> the same width, width: 34px and center it using margin: 0 auto
Updated fiddle

You can be more specific on the element you are targeting, at the moment you are targeting the element with the id of #scroll-top but you can be more specific and target the icon element within that #scroll-top i
$("#scroll-top i").click(function() {
alert('test');
});
.footer {
background-color: black;
color: white;
padding-top: 40px;
}
.footer .fa-round {
padding: 0;
border-radius: 50%;
color: white;
background-color: red;
font-size: 1.3em;
line-height: 1.6em;
height: 34px;
width: 34px;
}
.footer #scroll-top {
display: block;
cursor: pointer;
z-index: 99999999;
text-align: center;
position: relative;
top: -50px;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer">
<span id="scroll-top">
<i class="fa fa-round fa-chevron-up"></i>
</span>
</div>

The span is set to display: block. This makes it take up the full row. You can change the jQuery to be more precise:
$("#scroll-top i").click(function() {
alert('test');
});
fiddle

Changed it to display:inline-block. http://jsfiddle.net/hgu02x0b/2/
.footer #scroll-top {
display: inline-block;
cursor: pointer;
z-index: 99999999;
text-align: center;
position: relative;
top: -50px;
left: 50%;
margin-left: -17px;
}
Hope this helps