I don't know javascript too well so I apologize if it's some simple fix - but I'm wondering how to get this smooth scroll to div to work. I have a fixed sidebar, with the jump to divs working here:
<div class="row-offcanvas row-offcanvas-left">
<div id="sidebar" class="sidebar-offcanvas">
<div class="col-md-12">
<center><h1 class="logo">
<a href="#">
<img src="assets/images/pglogo.png"/>
</a>
</h1></center>
<ul class="nav nav-pills nav-stacked">
<li class="active">Home</li>
<li><a class="smoothScroll" href="#discovery">Discovery</a></li>
<li><a class="smoothScroll" href="#wireframing">Wireframe</a></li>
<li><a class="smoothScroll" href="#visual-design">Visual Design</a></li>
<li><a class="smoothScroll" href="#project-development">Project Setup</a></li>
<li><a class="smoothScroll" href="#test-debugging">Test & Debugging</a></li>
<li><a class="smoothScroll" href="#final-product">Final Product</a></li>
<li><a class="smoothScroll" href="#contact">Contact</a></li>
</ul>
</div>
I also have the javascript smooth scroll function here:
$(function() {
$('.smoothScroll').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Any insight onto why this isn't working?
Related
I'm trying to learn animated scrolling with jQuery on a portfolio website. I think this should work in theory but my buttons still just 'jumps' to its href instead of scrolling.
The javascript is enclosed in the $(document).ready(function() {}) thing:
$('a[href*="#"]:not([href="#"])').click(function() {
var target = $(this.hash);
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">My Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Me</a>
</li>
</ul>
</div>
I'm hoping that this would scroll to my section with those ids instead of jumping.
Use preventDefault() to stop default ahref action first and it should be fine
// added e parameter to click callback
$('a[href*="#"]:not([href="#"])').click(function(e) {
// use prevent default function
e.preventDefault()
var target = $(this.hash);
if (target.length) {
$('html, body').animate({scrollTop: target.offset().top}, 1000);
}
});`
You are activating default action of the <a> tag so browser have no time to animate scroll because you are there already.
You can try following.
$('a[href*="#"]:not([href="#"])').click(function(e) {
e.preventDefault();
var target = $(this).attr('href');
if (target.length) {
$('html, body').animate({scrollTop: $(target).offset().top}, 1000);
}
});
So this is what I have as my top nav bar. I'm using this along with jquery
<nav>
<div class="brand">BRAND</div>
<ul>
<li><a id="home" href="#home">Home</a></li>
<li><a id="about" href="#about">About</a></li>
<li><a id="buy" href="#buy">Buy</a></li>
<li><a id="contact" href="#contact">Contact</a></li>
<li><a id="login" class="active" href="#">Log In</a></li>
</ul>
</nav>
and i'm trying to use this line of code to have it when clicked on one of the options on my nav bar to scroll to that element
$("nav a").on("click", function(e) {
e.preventDefault();
var section = $(this).attr("href");
$("html, body").animate({
scrollTop: $(section).offset().top
}, 850);
});
but it isn't working?
You have to put the id to thelement you want to scroll to not the link itself
$("nav a").on("click", function(e) {
e.preventDefault();
var section = $(this).attr("href");
$("html, body").animate({
scrollTop: $(section).offset().top
}, 850);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div class="brand">BRAND</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Buy</li>
<li>Contact</li>
<li><a class="active" href="#">Log In</a></li>
</ul>
</nav>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="home">
example
</div>
You've put the ids on the wrong elements. Each of your links is set to target itself -- so the browser scrolls to the link that was just clicked, which is already visible.
Place id="…" on the element that you want to scroll to, not the link.
I'm not really a jquery expert so please bear with me. I have "googled" but couldn't find any solution.
Here is the code:
<div id="navbarResponsive" class="collapse navbar-collapse col-auto">
<ul id="primary-menu" class="navbar-nav text-uppercase">
<li id="menu-item-1725" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1725 nav-item">Home</li>
<li id="menu-item-1739" class="nav-item menu-item menu-item-type-custom menu-item-object-custom menu-item-1739"><a rel="nav-link js-scroll-trigger" href="#services" class="nav-link js-scroll-trigger">Services</a></li>
<li id="menu-item-1735" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1735 nav-item">Portfolio</li>
<li id="menu-item-1736" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1736 nav-item">About</li>
</ul>
Here is the portion of the script/snippet:
(function($) {
"use strict"; // Start of use strict
$('a.nav-link.js-scroll-trigger').click(function(e) {
console.log(e);
});
$('.js-scroll-trigger').on('click', 'a', function(e) {
console.log(e);
});
$('li').find('a.js-scroll-trigger').click(function(e) {
console.log(e);
});
$('a').click(function(e) {
console.log(e);
});
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(e) {
if (location.pathname.replace(/^\//, '') ==
this.pathname.replace(/^\//, '') && location.hostname ==
this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +
']');
if (target.length) {
$('html, body').animate({
scrollTop: (target.offset().top - 54)
}, 1000, "easeInOutExpo");
return false;
}
}
});
The problem is that it only triggers $('a') and ignores the rest of the selectors.
I have tried checking it on the browser:
console - https://www.screencast.com/t/sikIcYY1J
sources using debugger -- https://www.screencast.com/t/TgbNhIb1usy
It appears that it was targeting the correct selectors but fails to trigger the condition as shown above. My smooth scrolling won't work anymore unless I place $('a') as the only condition. It used to work few days before, I dunno what happened. Something must have triggered it not to work. Could someone please enlighten me? Answers would really be appreciated, many thanks...
change target.length to $(target).length
add e.preventDefault();
fix var target = this.hash;
but, why do you need this for? if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
All you need is this:
$(function() {
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(e) {
e.preventDefault();
var target = this.hash;
if ($(target).length) {
$('html, body').animate({
scrollTop: ($(target).offset().top - 54)
}, 1000, "easeInOutExpo");
return;
}
});
});
Anyway, here is the fix to your script.
$(function() {
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(e) {
e.preventDefault();
if (location.pathname.replace(/^\//, '') ==
this.pathname.replace(/^\//, '') && location.hostname ==
this.hostname) {
var target = this.hash;
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if ($(target).length) {
$('html, body').animate({
scrollTop: ($(target).offset().top - 54)
}, 1000, "easeInOutExpo");
console.log(target);
return;
}
}
});
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="navbarResponsive" class="collapse navbar-collapse col-auto">
<ul id="primary-menu" class="navbar-nav text-uppercase">
<li id="menu-item-1725" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1725 nav-item">Home</li>
<li id="menu-item-1739" class="nav-item menu-item menu-item-type-custom menu-item-object-custom menu-item-1739"><a rel="nav-link js-scroll-trigger" href="#services" class="nav-link js-scroll-trigger">Services</a></li>
<li id="menu-item-1735" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1735 nav-item">Portfolio</li>
<li id="menu-item-1736" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1736 nav-item">About</li>
</ul>
</div>
<p>ggwgsgwg</p>
<p> </p>
<p>ggwgsgwg</p>
<p>ggwgsgwg</p>
<p> </p>
<p> </p>
<p> </p>
<p>ggwgsgwg</p>
<p> </p>
<p> </p>
<p> </p>
<p id="services">ggwgsgwg</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>ggwgsgwg</p>
<p> </p>
<p>ggwgsgwg</p>
<p>ggwgsgwg</p>
<p> </p>
<p>ggwgsgwg</p>
<p>ggwgsgwgv</p>
Change your JS "(function($) {" to this:
$(document).ready(function() {
With this, the events work for me.
It is a syntax error.
(function($) {
should need to change
$(function() {
DEMO
I have another script which I made that adds classes to make the smooth scrolling work. It was called AFTER the script above, so I moved it BEFORE inside the functions.php (Wordpress). The scripts started to work again. Silly of me not to notice that. Sorry for the trouble, & thank you, guys...
I'm working on designing website but facing a issue that href # tags are not working in chrome but working in firefox
<ul class="navigation" style="margin-top: 75px;">
<li><a class="scroll-to" href="#section-1">Home</a></li>
<li><a class="scroll-to" href="#section-2">About Us</a></li>
<li><a class="scroll-to" href="#section-4">Products</a></li>
<li><a class="scroll-to" href="#section-5">Clients</a></li>
<li><a class="scroll-to" href="#section-6">Team</a></li>
<li><a class="scroll-to" href="#section-7">Contact Us</a></li>
</ul>
<section id="section-1" class="banner-container color-light center nav-trigger">
I am not sure where its going wrong
The following works fine for me in Chrome 62. Are you closing your section tag? Are you sure there is enough height that it would actually scroll?
section {
padding: 100px;
border: 1px solid blue;
}
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Clients</li>
<li>Team</li>
<li>Contact Us</li>
</ul>
<section id="section-1">Home</section>
<section id="section-2">About Us</section>
<section id="section-4">Products</section>
<section id="section-5">Clients</section>
<section id="section-6">Team</section>
<section id="section-7">Contact Us</section>
You can try follow this.
https://www.gregoryvarghese.com/chrome-anchor-link-not-working-fix/
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Make sure you have enough height for each div so that page can scroll. Without page scroll you can't see changes, because nothing wrong with your code.
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Clients</li>
<li>Team</li>
<li>Contact Us</li>
</ul>
<section style="height:500px" id="section-1">Home</section>
<section style="height:500px" id="section-2">About Us</section>
<section style="height:500px" id="section-4">Products</section>
<section style="height:500px" id="section-5">Clients</section>
<section style="height:500px" id="section-6">Team</section>
<section style="height:500px" id="section-7">Contact Us</section>
I guess its a bug in certain versions of Chrome, this workaround did the trick for me, good luck! -
$(document).ready(function () {
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (window.location.hash && isChrome) {
setTimeout(function () {
var hash = window.location.hash;
window.location.hash = "";
window.location.hash = hash;
}, 300);
}
});
For me, it was the href that redirected to pages with hashtags, so I did this workaround:
$('body').on('click', 'a[href*="#"]:not([href="#"])', function(e) {
if($(this).attr('href').indexOf('http') > -1 && /chrome/i.test( navigator.userAgent) ){
e.preventDefault();
window.location.href = $(this).attr('href');
window.location.reload();
return false;
}
});
Super newb question here, but my brian is not working tonight. I'm using a provided JS script on a wordpress site to make a single-page website menu scroll to the relevant section.
I have a menu with options 'Home' 'People' 'Info' 'Contact'
These links are structured like so: "http://sample.com/#home"
<!-- Navigation Menu -->
<div class="collapse navbar-collapse" id="navigation">
<ul id="menu-menu-1" class="nav navbar-nav navbar-right"><li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15">
Home</li>
<li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom menu- item-51">
People</li>
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14">
Info</li>
<li id="menu-item-54" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-54">
Contact</li>
</ul>
</div>
<!-- End Navigation Menu -->
The JS follows below.
//Navigation Scrolling
$('#navigation a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
The problem: When clicking the menu-links, the page reloads and shows the relevant section.
I would like the menu items to scroll to the relevant section instead.
Thanks.
TL;DR Menu items reload page instead of scrolling to relevant section. JS above.
Just prevent the default functionality of the anchor tag by using event.preventDefault(),
$('#navigation a[href*=#]').click(function(e) {
e.preventDefault();
//Rest of your code