Smooth Scroll to Top & Hide <div> Upon Click - javascript

So I have it working perfectly when you click the "back to top" arrow, it hides the menu, but I just want it to do a smoothscroll to the top of the page upon click in addition to that. You can test out what I currently have at http://rac.site44.com just readjust the width so you are in a mobile view (its responsive) and click the top-right "menu" icon to see the arrow.
Here is the HTML
<div class="col_4 no-padding">
<a href="/">
<img class="logo" src="img/clear.gif" alt="RAC-Engineering - Structural Engineer Buffalo NY">
</a>
<a class="nav-toggle"><span class="mobile-nav-toggle mobile-only"></span></a>
<a class="nav-toggle2 hidden"><span class="mobile-nav-toggle mobile-only"></span></a>
</div>
<div class="col_8 no-padding last">
<nav id="nav" class="nav mobile-hide">
<ul>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
<li>Links</li>
<li>Estimate</li>
<li class="top mobile-only"></li>
</ul>
</nav>
</div>
and the JS: (Obviously I'm assuming you just need a line of code telling it to scroll to top after the $("li.top").click(function(e) { but I can't seem to figure it out)
$(function() {
$("li.top").click(function(e) {
$("#nav").addClass('mobile-hide');
$(".nav-toggle").removeClass('hidden');
$(".nav-toggle2").addClass('hidden');
e.preventDefault();
});
});
Thanks for the help!

I just tested this on your site:
$("html, body").animate({ scrollTop: "0px" });
You can read about .animate() here: http://api.jquery.com/animate/

Related

Autoscroll goes too far in webpage

I am testing a bootstrap webpage, auto scroll works on desktop but scrolls to far on mobile and makes my <h2> disappear and leave only the <p> tags visible.
Why does this scroll down not scroll to the beginning of the section?
Can anybody help me out? Many thanks
Menu:
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="#about">Over</a>
</li>
<li>
<a class="page-scroll" href="#Teams">Teams</a>
</li>
<li>
<a class="page-scroll" href="#sponsoren">Sponsoren</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
Section:
<section id="about" class="content-section text-center">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 wow fadeInDown" data-wow-delay=".2s ">
<h2>test</h2>
<p>test</p>
</div>
</div>
</section>
css:
.content-section{}
js:
// jQuery to collapse the navbar on scroll
function collapseNavbar() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
}
$(window).scroll(collapseNavbar);
$(document).ready(collapseNavbar);
// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});

JQUERY "Click to scroll" keeps going back to the top when clicking on anything

if I click on "CV" it will scroll to the page. If I click on a link or photo it will keep scrolling back to the top of the page.
// When the Document Object Model is ready
jQuery(document).ready(function(){
// 'thisCVTopPosition' is the amount of pixels #thisCV
// is from the top of the document
var thisCVTopPosition = jQuery('#thisCV').offset().top;
// When #scroll is clicked
jQuery('#cv').click(function(){
// Scroll down to 'thisCVTopPosition'
jQuery('html, body').animate({scrollTop:thisCVTopPosition}, 'fast');
// This stops the anchor link from acting like a normal anchor link
return false;
});
jQuery('#thisCV').parent().click(function(){
jQuery('html, body').animate({scrollTop:1}, 'fast');
return false;
})
});
My navigation bar:
<div id="sidebar-wrapper">
<center>
<ul class="sidebar-nav">
<li class="logo"><a href="#Home" class="scroll"><img src="img/logo2.png" alt=
"Portfollio" /></a></li>
<li style="list-style: none; display: inline">
<div class="animation">
<div class="hoverImages" align="center"><img src="img/photo.jpeg" alt=
"Photo" style="width:auto;height:auto;" /></div>
</div>
</li>
<li>Home</li>
<li>CV</li>
<li>My Projects</li>
<li>GitHub</li>
<li>Contact Me</li>
</ul>
</center>
</div>
CV
` <div id="page-content-wrapper">
<div class="container-fluid">
<div id="thisCV" style="height: 1000px; width 100px">
<h1>My CV</h1>
[...]
`
Is it my divs or the jquery?
Update: Fixed my divs but it's still not working.
Anchor elements have a default action: going to their href url. When the href attribute is not set (or valid, I believe), the default action is refreshing the page (and going to the top).
It is possible that this is what is happening to you. You can use jQuery's event.preventDefault() to prevent any event from triggering its default action (jQuery docs):
jQuery('#cv').click(function(event){
// Prevent the click from loading href
event.preventDefault();
// Scroll down to 'thisCVTopPosition'
jQuery('html, body').animate({scrollTop:thisCVTopPosition}, 'fast');
// This stops the anchor link from acting like a normal anchor link
return false;
});

Anchor Point Jumps Instead Of Smooth Scroll

For some reason when i click my logo image which is the same anchor point link as 'Home' on my Nav Menu it jumps instead of smooth scrolling like 'Home' does when it's clicked.
Does anyone know why this is happening & how do i go about correcting this? Thanks in advance :)
<!-- LOGO -->
<div class="logo pull-left">
<img src="images/logo.png" class="logo" alt="">
</div>
<!-- //LOGO -->
<!-- MENU -->
<div class="pull-right">
<nav class="navmenu center">
<ul>
<li class="first active scroll_btn">Home</li>
<li class="scroll_btn">About Us</li>
<li class="scroll_btn">Products</li>
<li class="scroll_btn">Team</li>
<li class="scroll_btn">News</li>
<li class="scroll_btn last">Contact</li>
</ul>
</nav>
</div>
<!-- //MENU -->
Add this to your existing ready function:
$(document).ready(function () {
$(".logo a").click(function (e) {
e.preventDefault();
$('body, html').animate({
scrollTop: 0,
scrollLeft: 0
}, 500);
});
});

Un-clickable sidebar links on bootstrap

I have a sidebar on my website that contains link's to individual divs, but when I try and click on any of them they just highlight without jumping to the div.
The website in question is http://www.ico.mmu.ac.uk/13143651/dip/pages/football.html
the top nav works fine, it's just the side nav that seems to have problems.
Sidebar nav
<div class="row-offcanvas row-offcanvas-left">
<div id="sidebar" class="sidebar-offcanvas">
<div class="col-md-12">
<a class="navbar-brand" href="#intro">Football</a>
<ul class="nav nav-pills nav-stacked text-center">
<li>Men's Training</li>
<li>Women's Training</li>
<li>Section</li>
<li>Section</li>
<li>Section</li>
</div>
</div>
example div
<div class="col-md-9" id="intro">
<div class="text-center">
<p>some text </p>
</div>
</div>
Any help will be greatly appreciated. Thanks
open your smoothscroll.js in path styling/js delete all and paste this to JUMP directly
jQuery(document).ready(function(){
jQuery('a[href^="#"]').click(function(e) {
var hashtag=$(this).attr("href");
window.location=hashtag;
});
});
EDIT:
try to put this on smoothscroll.js
jQuery(document).ready(function(){
jQuery('a[href^="#"]').click(function(e) {
jQuery('#main').animate({ scrollTop: jQuery(this.hash).offset().top}, 1000);
return false;
e.preventDefault();
});
});
this is the problem: ('html,body') you want to scroll the main div

Menu scrolls to div WITHOUT animation

So i got a onepage website which has menu points that scroll to a div on click. This is working so far. I implemented a jquery function that should give the whole thing an animation but somehow it does not work.
Here is the HTML:
<div class="mainmenu">
<div class="menuwrapper">
<div class="menulist">
<ul class="items">
<li class="menuitem">
HOME
</li>
<li class="menuitem">
TEAM
</li>
<li class="menuitem">
LEISTUNGEN
</li>
<li class="menuitem">
KNOW-HOW
</li>
<li class="menuitem">
KONTAKT
</li>
</ul>
</div>
</div>
</div>
and this is the js:
$(document).ready(function(){
$('a').click(function(){
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 500, "swing");
return false;
});
$(window).resize(function(){
sliderResize();
});
});
someone has an idea?
The problem is that when clicking on the <a> tag, it still does what an <a> tag does... bring you to the link (in this case an anchor tag).
To avoid the default link action, you need to add code to prevent it:
$('a').click(function(e){
e.preventDefault(); // This will stop the default jump to anchor
// Now you can add your smooth scroll animation
Read the preventDefault() documentation for more information.

Categories

Resources