We Keep Coding

problem with the sidebar. sidebar is not closing

for some reason the close button on the sidebar is not showing nor working, the show sidebar works perfectly fine however the closing function is not working. im providing the html, css ans javascript related to the close function
here's my html:
<aside class="sidenav">
<div class="sidenav__close-icon">
<i class="bi bi-x-lg"></i>
</div>
<img class="sidenav__logo" src="../static/img/ManageX5.png">
<ul class="sidenav__list">
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('dashboard')}}">Dashboard</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('profile')}}">Profile</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('users')}}">Users</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('projects')}}">Projects</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('sites')}}">Sites</a>
</li>
</ul>
<ul class="sidenav__logout">
<li class="list-logout-item">
<a class="sidenav__list-item-logout" href="#">logout</a>
</li>
</ul>
</aside>
this is the JS part:
const menuIconEl = $('.menu-icon');
const sidenavEl = $('.sidenav');
const sidenavCloseEl = $('.sidenav__close-icon');
/*===== Add and remove provided class names =====*/
function toggleClassName(el, className) {
if (el.hasClass(className)) {
el.removeClass(className);
} else {
el.addClass(className);
}
}
/*===== Open the side nav on click =====*/
menuIconEl.on('click', function() {
toggleClassName(sidenavEl, 'active');
});
/*===== Close the side nav on click =====*/
sidenavCloseEl.on('click', function() {
toggleClassName(sidenavEl, 'active');
});
and this is the css related to the sidebar:
.sidenav__close-icon {
position: absolute;
visibility: visible;
top: 8px;
right: 12px;
cursor: pointer;
font-size: 20px;
color: #000;
}

The reason of why you can't see the close icon isn't showing up is that you don't have the necessary styles that makes the element (.sidenav__close-icon) to be rendered/shown as an icon.
If you have it somewhere in your project, I suggest you making some tweaks like the following:
You can use jQuery's toggleClass method to toggle a class
function toggleClassName(el, className) {
el.toggleClass(className);
}
The close button/icon has CSS properties (position, top, right) that makes it positioned to top right of the page which results in not visible. You may have to add the following CSS in order to give close icon a relative position. In your case, the relativity can be inherited from its parent, the .sidenav element.
.sidenav {
position: relative;
width: 200px;
}
.sidenav__close-icon {
position: absolute;
visibility: visible;
top: 8px;
right: 12px;
cursor: pointer;
font-size: 20px;
color: #000;
}
Here's a snippet which toggles active class and demonstrates the change
const menuIconEl = $('.menu-icon');
const sidenavEl = $('.sidenav');
const sidenavCloseEl = $('.sidenav__close-icon');
/*===== Add and remove provided class names =====*/
function toggleClassName(el, className) {
el.toggleClass(className);
// Much shorter, but the following lines can also work
/*if (el.hasClass(className)) {
el.removeClass(className);
} else {
el.addClass(className);
}*/
}
/*===== Open the side nav on click =====*/
menuIconEl.on('click', function () {
toggleClassName(sidenavEl, 'active');
});
/*===== Close the side nav on click =====*/
sidenavCloseEl.on('click', function () {
toggleClassName(sidenavEl, 'active');
});
.sidenav {
position: relative;
width: 200px;
}
.sidenav__close-icon {
position: absolute;
visibility: visible;
top: 8px;
right: 12px;
cursor: pointer;
font-size: 20px;
color: #000;
}
.active {
outline: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside class="sidenav">
<div class="sidenav__close-icon">
<i class="bi bi-x-lg">X</i>
</div>
<img class="sidenav__logo" src="../static/img/ManageX5.png">
<ul class="sidenav__list">
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('dashboard')}}">Dashboard</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('profile')}}">Profile</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('users')}}">Users</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('projects')}}">Projects</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('sites')}}">Sites</a>
</li>
</ul>
<ul class="sidenav__logout">
<li class="list-logout-item">
<a class="sidenav__list-item-logout" href="#">logout</a>
</li>
</ul>
</aside>

How to make an infinite horizontal scroll on list (li) elements

What I am looking to achieve is to make the items in the list continue scrolling even at the last item in both directions. i.e: Let it continue to scroll starting from the first OR last item all over again. I have worked out the HTML and CSS but don't know what method to use in js/jquery. I'd really appreciate any help or a good pointer.
Here is the HTML
<html>
<div class="container">
<ul class="horscroll" id="autoscrollR">
<li>
<a href="#myGallery" data-slide-to="0" data-tooltip="acci"><img
class="img-thumbnail"
src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=1" >
</a>
</li>
<li>
<a href="#myGallery2" data-slide-to="1" data-tooltip="aiico"><img
class="img-thumbnail"
src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2">
</a>
</li>
<li>
<a href="#myGallery3" data-slide-to="2" data-tooltip="asaba"><img
class="img-thumbnail"
src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=3">
</a>
</li>
...........
</ul>
</div> </html>
And the CSS is used is very basic for an example:
.container{
max-width: 100%;
}
.horscroll {
display: -webkit-inline-box;
width: 100%;
overflow: auto;
margin:10px;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
.img-thumbnail {
margin: 5px 5px 0px 5px;
border: 1px solid #;
border-radius: 4px;
}
Now the Js function to use is where I am stuck.
Here is the FIDDLE LINK

So you are looking for something like this:-
var bgWidth = 350; //Max-width of <li> you would like to set.
var scrollPos = Math.ceil($('body').width() / 20);
$(document).ready(function() {
$('body').width(bgWidth + $(window).width());
$(window).scroll(function() {
if ($(window).scrollLeft() >= ($('body').width() - $(window).width())) {
$(window).scrollLeft(1 + scrollPos / 4);
} else if ($(window).scrollLeft() == 0) {
$(window).scrollLeft($('body').width() - $(window).width() - scrollPos / 4);
}
});
});
$(window).resize(function() {
$('body').width(bgWidth + $(window).width());
});
.container {
max-width: 100%;
}
.horscroll {
display: -webkit-inline-box;
width: 100%;
overflow: auto;
margin: 10px;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
.img-thumbnail {
margin: 5px 5px 0px 5px;
border: 1px solid #;
border-radius: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<ul class="horscroll" id="autoscrollR">
<li>
<a href="#myGallery" data-slide-to="0" data-tooltip="acci"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=1">
</a>
</li>
<li>
<a href="#myGallery2" data-slide-to="1" data-tooltip="aiico"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2">
</a>
</li>
<li>
<a href="#myGallery3" data-slide-to="2" data-tooltip="asaba"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=3">
</a>
</li>
<li>
<img class="img-thumbnail " src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=4 ">
</li>
<li>
<a href="#myGallery" data-slide-to="0" data-tooltip="acci"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=5">
</a>
</li>
<li>
<a href="#myGallery2" data-slide-to="1" data-tooltip="aiico"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=6">
</a>
</li>
<li>
<a href="#myGallery3" data-slide-to="2" data-tooltip="asaba"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=7">
</a>
</li>
<li>
<img class="img-thumbnail " src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=8 ">
</li>
</ul>
</div>
Hope this helps you!

Carousel right click button not working properly

i have a typical carousel when i click left button if marginLeft is 0 it doesn't slide but i don't know what limited value to set for the slider when i click right button.
i tried calculating the images width and the margin space between them to set the limit value for the right button so slider doesn't slide past it but that doesn't work if you see it on another device because it's width is higher.
codepen : https://codepen.io/anon/pen/bXBaYW?editors=1010
// caoursel
const carousel = document.getElementById('carousel');
const leftArrow = carousel.querySelector('.carousel-left-arrow');
const rightArrow = carousel.querySelector('.carousel-right-arrow');
const slides = carousel.querySelector('.slides');
const slideImgs = carousel.querySelectorAll('.slide img');
let marginLeft = 0;
// works fine
function scrollLeft() {
if (getComputedStyle(slides).marginLeft >= '0px') return;
marginLeft += 310;
slides.style.marginLeft = marginLeft + "px";
}
// need to set right slide a limited value.
function scrollRight() {
if (getComputedStyle(slides).marginLeft <= '-1240px') return; // dont scroll past this value
marginLeft -= 310;
slides.style.marginLeft = marginLeft + "px";
}
leftArrow.addEventListener('click', scrollLeft);
rightArrow.addEventListener('click', scrollRight);
i want the slider to stop sliding when i reach the last image.

What you need to do is to not hardcode the width of the .slides container in CSS and JS.
Thus allowing you to dynamically compute the width of the .slides container, and the remaining space you can scroll/slide.
Below is an illustration of the variable and their values in relation to the whole component.
remainingSpaceToScroll will tell you how much space you have on the right, so you can not exceed the limit. The value of it can be found with simple math, by subtracting the sum of parentWidth and currentScroll from the value in scrollWidth.
Here is the code from your example updated so you can inspect.
I've removed the space between the slides for the simplicity sake.
https://codepen.io/anon/pen/BXpaNv
const carousel = document.getElementById("carousel");
const leftArrow = carousel.querySelector(".carousel-left-arrow");
const rightArrow = carousel.querySelector(".carousel-right-arrow");
const slides = carousel.querySelector(".slides");
const slideImgs = carousel.querySelectorAll(".slide img");
let marginLeft = 0;
let carouselImageWidth = 300;
function scrollLeft() {
let parentWidth = carousel.offsetWidth;
let scrollWidth = parseInt(getComputedStyle(slides).width, 10);
let currentScroll = Math.abs(
parseInt(getComputedStyle(slides).marginLeft, 10)
);
let remainingSpaceToScroll = currentScroll;
if (remainingSpaceToScroll <= 0) {
return;
} else if (remainingSpaceToScroll >= carouselImageWidth) {
marginLeft = -(currentScroll - carouselImageWidth);
} else {
marginLeft = -(currentScroll - remainingSpaceToScroll);
}
slides.style.marginLeft = marginLeft + "px";
}
function scrollRight() {
let parentWidth = carousel.offsetWidth;
let scrollWidth = parseInt(getComputedStyle(slides).width, 10);
let currentScroll = Math.abs(
parseInt(getComputedStyle(slides).marginLeft, 10)
);
let remainingSpaceToScroll = scrollWidth - (parentWidth + currentScroll);
if (remainingSpaceToScroll <= 0) {
return;
} else if (remainingSpaceToScroll >= carouselImageWidth) {
marginLeft = -(currentScroll + carouselImageWidth);
} else {
marginLeft = -(currentScroll + remainingSpaceToScroll);
}
slides.style.marginLeft = marginLeft + "px";
}
leftArrow.addEventListener("click", scrollLeft);
rightArrow.addEventListener("click", scrollRight);
HTML below:
<p>click right arrow till end</p>
<div id="carousel">
<span class="carousel-left-arrow arrow"><</span>
<ul class="slides">
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
</ul>
<span class="carousel-right-arrow arrow">></span>
</div>
CSS below:
#carousel {
width: 90%;
margin: 0 auto;
margin-top: 20px;
overflow: hidden;
position: relative;
height: 122px;
}
#carousel .arrow {
position: absolute;
top: 32%;
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid #000;
border-radius: 0%;
cursor: pointer;
width: 20px;
z-index: 1;
}
#carousel .arrow img {
margin-top: 10px;
max-width: 100%;
}
#carousel .carousel-left-arrow {
width: 25px;
left: 0;
margin-left: 5px;
}
#carousel .carousel-right-arrow {
right: 0;
width: 25px;
}
#carousel .slides {
overflow: hidden;
list-style: none;
padding: 0;
transition: 0.2s;
margin-left: 0;
margin-right: 0;
border: 1px solid red;
height: 120px;
position: absolute;
left: 0;
top: 0;
margin: 0;
display: flex;
}
#carousel .slide {
float: left;
margin: 0;
text-decoration: none;
color: whitesmoke;
}
#carousel .slide > a {
display: block;
}
#carousel .slides img {
width: 300px;
display: block;
}

Make the background image of class to be slideshow

I have class that have background image and this background image have fixed navbar and some text on it. How can I make this background image to be slideshow with another two images. Can someone help me with this without damaging the fixed navbar and the text on it?
Here is my codes
<div id="home" class="intro route bg-image" >
<nav class="navbar navbar-b navbar-trans navbar-expand-md fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll" href="#page-top"><%= image_tag "logo.png",class: "logo",alt: "eric chism trail to welness logo" %></a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarDefault"
aria-controls="navbarDefault" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</button>
<div class="navbar-collapse collapse justify-content-end" id="navbarDefault">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link js-scroll active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#service">Services</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#work">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="overlay-itro"></div>
<div class="intro-content display-table">
<div class="table-cell">
<div class="container">
<h1 class="intro-title mb-4">Eric Chism Trail to Wellness</h1>
<p class="intro-subtitle"> provides a customized journey to complete health and wellness</span><strong class="text-slider"></strong></p>
<!-- <p class="pt-3"><a class="btn btn-primary btn js-scroll px-4" href="#about" role="button">Learn More</a></p> -->
</div>
</div>
</div>
</div>
css file
.intro {
height: 100vh;
position: relative;
color: #fff;
background-image: url(asset-path("attachment_1550437745.png"));
}
.intro .intro-content {
text-align: center;
position: absolute;
}

I have created a very raw, pure CSS solution, as good starting point for you. Using different animations and delays you could achieve some really awesome effects.
body {
margin: 0;
padding: 0;
}
.route {
height: 100vh;
position: relative;
color: #fff;
}
.navbar {
position: fixed;
}
.slide {
position: relative;
height: 100%;
width: 33.33%;
margin: 0;
float: left;
}
.slide-1 {
background-image: url(https://picsum.photos/1200/800?image=11);
}
.slide-2 {
background-image: url(https://picsum.photos/1200/800?image=12);
}
.slide-3 {
background-image: url(https://picsum.photos/1200/800?image=13);
}
.slideshow {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 0;
overflow: hidden;
color: #000;
}
.slideshow-inner {
position: relative;
height: 100%;
width: 300%;
animation: move 20s ease infinite;
}
.intro .intro-content {
text-align: center;
position: absolute;
}
#keyframes move {
0% {
transform: translate(0, 0);
}
33.33% {
transform: translate(-33.33%, 0);
}
66.66% {
transform: translate(-66.66%, 0);
}
}
<div id="home" class="route bg-image">
<div class="slideshow">
<div class="slideshow-inner">
<div class="slide slide-1"><span>Some Text</span></div>
<div class="slide slide-2"><span>Some Text</span></div>
<div class="slide slide-3"><span>Some Text</span></div>
</div>
</div>
<nav class="navbar navbar-b navbar-trans navbar-expand-md fixed-top" id="mainNav">
<div class="container">
<div class="navbar-collapse collapse justify-content-end" id="navbarDefault">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link js-scroll active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#service">Services</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#work">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</div>

Presumably you mean a time-based slideshow rather than one where the user presses buttons. The various options are all typically handled with JavaScript. As your background element has children, I would extend your existing code by adding new classes corresponding to new background images, and switching between them.
.bg1 {
background-image: url(asset-path("img1.png"));
}
.bg2 {
background-image: url(asset-path("img2.png"));
}
.bg3 {
background-image: url(asset-path("img3.png"));
}
Then add the first class to your background element:
<div id="home" class="intro route bg-image bg1" >
and include JS code to cycle through the classes, like below - included as part of a snippet so you can see the effect.
function updateSlide() {
const bgCount = 3; //This needs to match the number of background classes - main weakness of this snippet
const bgElem = document.getElementById('home'); // Background element
let foundClasses = []; //List of background classes found
let bgIndex = 0;
for(let classIndex = 0; classIndex < bgElem.classList.length; classIndex++) { // Using a full for in case the element somehow gets multiple background classes
const thisClass = bgElem.classList.item(classIndex);
if(thisClass.substr(0, 2) == 'bg') {
foundClasses += thisClass;
bgIndex = parseInt(thisClass.substr(2)) + 1;
}
}
if(bgIndex > bgCount) {
bgIndex = 1;
}
bgElem.classList.add('bg' + bgIndex); //Apply the new class
bgElem.classList.remove(foundClasses); //Remove all previous background classes
}
setInterval(updateSlide, 2000); // Change every 2 seconds
#home {
display: block;
}
.bg1 {
background: red;
}
.bg2 {
background: yellow;
}
.bg3 {
background: green;
}
<div id="home" class="bg1">Test</div>
Long-term, you would want the cycling script to get its background-count from a Rails variable or the HTML instead of a hard-coded value.

jQuery scroll effect is not working

Kindly help me with my problem, my scroll effects are not working. I am not able to identify the problem. I am using bootstrap 4. Here's my code.
//SCROLL EFFECT
$(".nav-link").click(function () {
var href = $(this).attr('href');
scrollAmount = 0;
if (href == "#home")
scrollAmount = 0;
else
scrollAmount = $(href).offset().top - 65;
$('html, body').animate({
scrollTop: scrollAmount
}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Navbar -->
<nav class="navbar navbar-toggleable-sm navbar-light bg-faded fixed-top scrollspy">
<div class="container nav-container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="index.html" title="DECOREA, Inc. Philippines, Supplier of Quality Office Furniture, Artificial Grass and Window Blinds">Decorea</a>
<div class="collapse navbar-collapse" id="main-navbar">
<ul class="navbar-nav ml-auto" data-spy="affix">
<li class="nav-item active">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section-about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section-services">Services </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section-contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End of Navbar -->
I appreciate your help. Thank you in advance.

Try with both snippet , i have tried to methods
Try with data();
$(document).ready(function(){
var countTimer = 1000;
$('a').on('click', function(event){
//event.preventDefault();
var currentID = $(this).attr('id');
//console.log(currentID);
var destination = $(this).data('anchor');
//console.log(destination);
var p = $('#' + destination);
var position = p.position();
$('body,html').animate({
scrollTop:position.top
}, countTimer);
});
})
body {
float: left;
width: 100%;
padding-bottom: 20px;
}
.common {
width: 100%;
float: left;
height: 400px;
background: #000;
margin-top: 30px;
}
.allbody {
float: left;
width: 100%;
}
a {
display: inline-block;
padding: 15px;
}
header {
float: left;
width: 100%;
position: fixed;
top: 0;
left: 0;
background: #fff;
}
.common h2 {
font-size: 30px;
color: #fff;
text-align: center;
padding-top: 10%;
}
<header>
first page
second page
third page
fourth page
</header>
<div class="allbody">
<div class="common" id="firstDestination" ><h2>First Page</h2></div>
<div class="common" id="secondDestination"><h2>Second Page</h2></div>
<div class="common" id="thirdDestination" ><h2>Third Page</h2></div>
<div class="common" id="fourthDestination" ><h2>Fourth Page</h2></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Try with get href method
// click-to-scroll behavior
$("a").click(function (e) {
e.preventDefault();
var section = $(this).attr('href');
$("html, body").animate({
scrollTop: $(section).offset().top
}, 1000, function () {
window.location.hash = section;
});
});
body {
float: left;
width: 100%;
padding-bottom: 0px;
}
.common {
width: 100%;
float: left;
height: 100vh;
display: table;
}
.allbody {
float: left;
width: 100%;
}
a {
display: inline-block;
padding: 15px;
}
header {
float: left;
width: 100%;
position: fixed;
top: 0;
left: 0;
background: #fff;
}
.common h2 {
font-size: 30px;
color: #fff;
text-align: center;
padding-top: 10%;
display: table-cell;
vertical-align: middle;
}
#firstDestination {
background: #000;
}
#secondDestination {
background: #999;
}
#thirdDestination {
background: #ccc;
}
#fourthDestination {
background: #c1c1c1;
}
<header>
first page
<a href="#secondDestination" >second page</a>
third page
fourth page
</header>
<div class="allbody">
<div class="common" id="firstDestination" ><h2>First Page</h2></div>
<div class="common" id="secondDestination"><h2>Second Page</h2></div>
<div class="common" id="thirdDestination" ><h2>Third Page</h2></div>
<div class="common" id="fourthDestination" ><h2>Fourth Page</h2></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>