We Keep Coding

How to add smooth scroll to your website using CSS or Javascript?

I need to add a smooth scroll effect everytime a link in my navbar is clicked. Here's the navbar:
<header class="navbar">
<div class="navElements">
<div class="logo">
<img src="./logo.png" alt="Millennium" />
</div>
<div class="hamburger">
<input type="checkbox" id="check" />
<label for="check" class="checkButton">
<i class="fas fa-bars" style="font-size: 35px"></i>
</label>
</div>
</div>
<div>
<ul class="navItems">
<li>HOME</li>
<li>SERVICES</li>
<li>PROJECTS</li>
<li>OUR TEAM</li>
<li>CONTACT</li>
</ul>
</div>
</header>
What do I need to add? And to which class?
I have added id for every section in the body
<div id="home">Stuff</div>
<div id="services">Stuff</div>
<div id="projects">Stuff</div>
<div id="ourTeam">Stuff</div>
<div id="contacts">Stuff</div>
Help me out...

You need to animate the Html, body Try like this hope it works!
HTML link:
Learn More
JS:
$(".scrollTo").on('click', function(e) {
e.preventDefault();
var target = $(this).attr('href');
$('html, body').animate({
scrollTop: ($(target).offset().top)
}, 2000);
});
HTML anchor:
<div id="yourId">My content here</div>

There's a CSS rule:
scroll-behavior: smooth;
Can be applied to a scrollable element

How to go to specific section using jQuery?

This is my site: http://2helix.com.au/v-04/ It's simple, built with HTML.
Now you can right side navbar. When you click on any link it will show you content. By default all content is hidden.
Now I want to point that section when I click on the link. For example: If I click on social link it's should go to social content section.
I know, If I use this It's should work:
<li><a class="showSingle social" target="1" href="social">SOCIAL</a></li>
<div id="social"></div>
If I do this then page is open on new window.
How can I smoothly go to that section without new window?
Thanks.
Here is my code:
<ul class="nav">
<li>SOCIAL</li>
<li><a class="showSingle" target="2">DIGITAL</a></li>
<li><a class="showSingle" target="3">DESIGN</a></li>
<li><a class="showSingle" target="4">DEVELOPMENT</a></li>
<li>CONTACT</li>
</ul>
<div class="container content">
<div class="row">
<div class="col-md-12">
<div id="div1 mySocial" class="targetDiv socialContent">
<h3 class="left"><span>1</span></h3>
<div class="textContent">
<h1><strong>SOCIAL</strong></h1>
<p>As Social Media becomes more intrinsic in our daily life’s, </p>
</div>
</div>
<div id="div2" class="targetDiv">
<h3 class="left"><span>2</span></h3>
<div class=" textContent">
<h1><strong>DIGITAL</strong></h1>
<p>Whethere it's eCommerce, web sites, EDM templates</p>
</div>
</div>
<div id="div3" class="targetDiv">
<h3 class="left"><span>3</span></h3>
<div class="textContent">
<h1><strong>DESIGN</strong></h1>
<p>Requiremtns for design in social </p>
</div>
</div>
<div id="div4" class="targetDiv">
<h3 class="left"><span>4</span></h3>
<div class="textContent">
<h1><strong>DEVELOPMENT</strong></h1>
<p>Success in Social is standing out</strong></p>
</div>
</div>
</div>
</div>
</div>
// jQuery code...
$(document).ready(function(){
jQuery(function(){
jQuery('.showSingle').click(function(){
jQuery('.content').show();
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).attr('target')).show();
});
});
});

You've a huge number of problems with your basic HTML code that you need to fix before you even look at adding jQuery
You cannot give an element 2 ids. <div id="div1 mySocial" class="targetDiv socialContent"> is not valid. You will need to create a separate element for your anchor e.g. <a id="mySocial"></a>
To link to an anchor you need to use # in the href, e.g. <a href="#mySocial" class="social" >
You cannot use target like that. There are specific values that are allowed and numbers are not any of them. Instead you could use the data-target
Now to what you are trying to do with jQuery...
You are hiding all content except for the one you click on, so there is no scrolling required... see the working example below. What exactly are you trying to achieve?
$(document).ready(function(){
jQuery(function(){
jQuery('.showSingle').click(function(){
jQuery('.content').show();
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).data('target')).show();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li>SOCIAL</li>
<li>DIGITAL</li>
<li>DESIGN</li>
<li>DEVELOPMENT</li>
<li>CONTACT</li>
</ul>
<div class="container content">
<div class="row">
<div class="col-md-12">
<a id="mySocial"></a>
<div id="div1" class="targetDiv socialContent">
<h3 class="left"><span>1</span></h3>
<div class="textContent">
<h1><strong>SOCIAL</strong></h1>
<p>As Social Media becomes more intrinsic in our daily life’s, </p>
</div>
</div>
<a id="digital"></a>
<div id="div2" class="targetDiv">
<h3 class="left"><span>2</span></h3>
<div class=" textContent">
<h1><strong>DIGITAL</strong></h1>
<p>Whethere it's eCommerce, web sites, EDM templates</p>
</div>
</div>
<a id="design"></a>
<div id="div3" class="targetDiv">
<h3 class="left"><span>3</span></h3>
<div class="textContent">
<h1><strong>DESIGN</strong></h1>
<p>Requiremtns for design in social </p>
</div>
</div>
<a id="development"></a>
<div id="div4" class="targetDiv">
<h3 class="left"><span>4</span></h3>
<div class="textContent">
<h1><strong>DEVELOPMENT</strong></h1>
<p>Success in Social is standing out</p>
</div>
</div>
</div>
</div>
</div>

Try to change your jquery code like This:
$(document).ready(function() {
jQuery(function() {
jQuery('.showSingle').click(function() {
jQuery('.content').show();
jQuery('.targetDiv').hide();
jQuery('#div' + $(this).attr('target')).show();
$('html, body').animate({
scrollTop: $('#div' + $(this).attr('target')).offset().top
}, 500);
return false;
});
});
});

Add also this code on click.
jQuery('html').animate({
scrollTop: jQuery(".content").offset().top
});

If you replace
target = "1"
with
data-target = "#social"
then the link will jump down to a div with the id = "social"
<li><a class="showSingle social" data-target="social" href="social">SOCIAL</a></li>
<div id="social"></div>

Is it possible to access internal jQuery # links (access single website sections directly) from external url?

I have a single page - auto scroll website template with different divs scattered around it.
As stated in the title, can I access those href sections directly from an outside url? For example typing http://ozzzi.herobo.com/#about to take me directly to the ABOUT section of the single page website?
HTML:
<div class="top-nav">
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s2">
<h3>Menu</h3>
<a class="scroll" href="#home">Home</a>
<a class="scroll" href="#features">Features</a>
<a class="scroll" href="#screenshots">Screen Shots</a>
<a class="scroll" href="#services">Services</a>
<a class="scroll" href="#about">About</a>
<a class="scroll" href="#products">Products</a>
</nav>
<div class="main buttonset">
<!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
<button id="showRightPush"><img src="images/menu.png" alt=""/></button>
<!--<span class="menu"></span>-->
</div>
jQuery:
<div class="top-nav">
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s2">
<h3>Menu</h3>
<a class="scroll" href="#home">Home</a>
<a class="scroll" href="#features">Features</a>
<a class="scroll" href="#screenshots">Screen Shots</a>
<a class="scroll" href="#services">Services</a>
<a class="scroll" href="#about">About</a>
<a class="scroll" href="#products">Products</a>
</nav>
<div class="main buttonset">
<!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
<button id="showRightPush"><img src="images/menu.png" alt=""/></button>
<!--<span class="menu"></span>-->
</div>
</pre>
another HTML + jQuery example:
<pre>
<div id="products" class="products wow fadeInUp" data-wow-delay="0.5s">
<div class="container">
<div class="products-info">
<h3>The basic introdution of our Products.</h3>
<p>Creativity itself doesn't care at all about results - the only thing it craves is the process.
Learn to love the process and let whatever happens next happen,
without fussing too much about it. </p>
<img src="images/1.jpg" class="img-responsive zoom-img" alt=" " />
<div class="link">
Sign up
</div>
</div>
</div>
</div>
</pre>
<script>
$(document).ready(function () {
size_li = $("#myList li").size();
x=1;
$('#myList li:lt('+x+')').show();
$('#loadMore').click(function () {
x= (x+1 <= size_li) ? x+1 : size_li;
$('#myList li:lt('+x+')').show();
});
$('#showLess').click(function () {
x=(x-1<0) ? 1 : x-1;
$('#myList li').not(':lt('+x+')').hide();
});
});
</script>
I've added a link to the template to view it's source in case my explanations weren't good enough: [SOURCE][1]
[1]: http://ozzzi.herobo.com/source

In your example #About is a "bookmark" link. Any browser will attempt to scroll to an element with id="About" in the specified page. Just add IDs to each section to want to bookmark. The links can then just have the #bookmarkid value at the end of the URL.

Menu with Collapse BootStrap

Hello I have a button in BootStrap. I use "collapse" in a menu and each of those buttons when I push this to collapse this appear with any problem.
But when I push another button with this active appear down on the other.
How change this action? When I push any button this hide this but with the same animation like collapse do it.
Here is the code, when you try it you'll understand me:
<ul class="nav nav-pills">
<li class="dropdown">1<strong class="caret"></strong></li>
<li class="dropdown">2<strong class="caret"></strong></li>
</ul>
<div class="clearfix"><p>content more</p></div>
<div id="content0a" class="collapse">
<div class="navbar">
<div class="thumbnail bs-example bullet0a">
<div class="media">
<div class="">
<ul><li> Content...1 </li></ul>
</div>
</div>
</div>
</div>
</div>
<div id="content1a" class="collapse">
<div class="navbar">
<div class="thumbnail bs-example bullet0a">
<div class="media">
<div class="">
<ul><li> Content...2 </li></ul>
</div>
</div>
</div>
</div>
</div>

Try this.
<script>
$(document).ready(function(){
$('.nav-pills a').click(function(){
$('.in').not($(this).data('target')).height(0);
$('.in').not($(this).data('target')).removeClass('in');
});
});
</script>
You can also try this. (which gives more of a collapse animation)
<script>
$(document).ready(function(){
$('.nav-pills a').click(function(){
$('.in').not($(this).data('target')).collapse('hide');
});
});
</script>
You can add it to the bottom of your page right before the </body> tag or add it to your existing javascript file.
Try that and let me know if it's close to what you want.

jQuery bxSlider and jQuery-ui tabs

I am using jQuery-ui for it's tab feature and also using bxSlider to slide images/content within only the first tab. However, when I click on the second tab the bxSlider "prev" and "next" options are still in my container. I tried using event.stopPropagation(), event.preventDefault() and stop() to stop the function, after realizing those didn't work I tried to create a function like this:
(function() {
$('#ab').click(function() {
$('#showcase').bxSlider({
controls: false,
});
});
});
where '#ab' is the tab and #showcase is the list element the images are located in. This function wouldn't exactly stop the bxSlider from being active, it would simply just hide the controls. However this did not work either.
Does anyone have any idea how this can be done?
Here is my HTML:
<div class="container">
<div id="tabs">
<ul>
<li><a id="sh" href="#showcase">Resumes</a></li>
<li><a id="ab" href="#about">About</a></li>
</ul>
<div id="showcase_container">
<ul id="showcase">
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
</ul>
<div id="about">
<span class="ab_title">Portfolio</span>
<ul id="portfolio_list">
<li class="item">
<a class="caption" name="resume1" href="#">
<img src="images/ty-headshot.jpg">
<span>
<big>Portfolio Title</big>
Quick Description of Portfolio Item
</span>
</a>
</li>
<li class="item">
<a class="caption" name="resume1" href="#">
<img src="images/ty-headshot.jpg">
<span>
<big>Portfolio Title</big>
Quick Description of Portfolio Item
</span>
</a>
</li>
<li class="item">
<a class="caption" name="resume1" href="#">
<img src="images/ty-headshot.jpg">
<span>
<big>Portfolio Title</big>
Quick Description of Portfolio Item
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
And here is my JavaScript:
//initialize tabs
$(document).ready(function() {
$('#tabs').tabs();
});
//initialize slider
$(document).ready(function(){
$('#showcase').bxSlider({
hideControlOnEnd: true,
infiniteLoop: false,
});
});
Any help would be greatly appreciated! If this cannot be done can someone please redirect me to a similar image/content slider so I can make this work?

Wrap the ul tag used for the slider in another div (called showcaseTab) or whatever. The bxslider will then be contained to that tab and the arrows should show and hide the correct way.
<div id="showcaseTab">
<ul id="showcase">
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
</ul>
</div>