Javascript go top page button - javascript

I have the code of go to top sroll function. The button that am fixed in my home page is showing when am redirecting home page i dont want that button in top of my home page i want that button while scrolling down wot i do?

i think i didn't get your question right but maybe you need to try "position: fixed" for the tag?! is that what you are looking for?
edit:
set your top-button to invisible:
#top {
visibility: hidden;
}
when the user scrolls you activate it!
$(window).scroll(function () {
$('#top').css("visibility", "visible");
});
when the top-button is clicked you simply hide it again:
$('#top').click(function () {
$('#top').css("visibility", "hidden");
});

Related

Prevent background scrolling with t&c's box open

As soon as you open my website, you are greeted with a T&C's and GDPR modal box see here. However, the background still scrolls when this is open, I have tried code to stop the scrolling, but that prevents scrolling across the whole website. Any help is greatly appreciated.
OUR WEBSITE
html,body.modal-open {
overflow: hidden;
}
.allowScroll {
overflow: scroll !important;
}
jQuery(function($) {
$(".termsagree").on("click", function() {
$("html, body.model-open").addClass("allowScroll");
});
});
EDIT Once you click agree the pop up won't show again unless you reload the website in another incognito page!
I couldn't find the css selector "modal-open" on your website but maybe something like this would work?
Replace your example code with this.
jQuery:
jQuery(document).ready(function ($) {
if($('#tlight').length){
$('body').css('overflow', 'hidden');
}
});
From the looks of it, once you click the agree button the page reloads and removes the '#tlight' element from the DOM. So what this will do is check if it exists on page load, and if it does set body overflow to hidden. You may need to add "important" to it depending on your current CSS.

Prevent background scroll & Jumping to top on mobile

On our mobile site, when clicking the hamburger icon in the top right I want the drop-down menu to appear and be scrollable, without the background scrolling. I have written javascript to set the body to fixed when you click the menu icon, however, this results in the website jumping to the top of the page. This is not what I want, I would like for it so that when the user clicks on the menu button, the background page stays where it is and does not jump to the top.
Below is the code that I have already tried for this.
Javascript
jQuery(function($) {
$(".x-btn-navbar").on("click", function() {
$("body").toggleClass("noScroll");
});
});
CSS
.noScroll {
position: fixed;
}
EDIT Here is the website: http://s2br5s5r3.gb-02.live-paas.net
href="#" makes page going top, give correctly url ex: href="https://www.google.com/" then the problem of going top will be solved.
css
.noScroll {
overflow: hidden;
/* position: fixed */
}
javascript
jQuery(function($) {
$(".x-btn-navbar").on("click", function() {
$("html, body").toggleClass("noScroll");
});
});
then the <body> will be unscrollable.
first of all remove the css position fixed from the class no-scroll. That's what is causing the page to jump on top when you click the menu button. After you open the menu it is scrollable as it should, i assume what you want is to prevent the page behind the open menu to be scrolled when the menu is open. Ypu can achieve this with javascript event listeners like so:
EventTarget.addEventListener('scroll', noscroll);
instead of EventTarget give the body an id and use the event listener to that when the user clicks on the element, but then when they close the menu you should remove the event listener with:
EventTarget.removeEventListener()
I hope this helps you
Keep in mind though that you have to separate the content of the page from the menu, because if you add the no scroll to the body that will apply also to the menu as long as it is a child of the body

How to add Javascript addEventListener on window scroll

So, I have a nav that when I hover the icon, shows/hide, which is working great! Now, I want to hide the menu when the user scrolls down the widown, then the show/hide on hover functionality takes place again. Below is my working code:
byClass('nav-toggle')[0].addEventListener('mouseover', showNav);
byClass('nav-wrap')[0].addEventListener('mouseleave', hideNav);
I try to add something like this:
byClass('nav-wrap')[0].addEventListener('scroll', hideNav);
.. but it didn't work. I guess its because I have to specify that I want to hide when the "window" is scrolled down?
Any help would be very appreciated.
You have to listen for scroll start and hide the nav. And you also have to know when user stops scrolling. There is no separate event for that, so we can use timeout to show your nav in 150 ms if the scroll has finished.
var timer = null;
window.addEventListener('scroll', function() {
if(timer !== null) {
clearTimeout(timer);
} else {
hideNav();
timer = setTimeout(function() {
showNav();
}, 150);
}
}, false);
This is a sample to hide menu on scroll
var content = document.getElementById('two');
content.addEventListener('scroll', hideMenu);
function hideMenu()
{
var menu = document.getElementById('one');
menu.style.display = 'none';
}
section {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
div#one {
width: 15%;
height: 200px;
background: red;
float: left;
}
div#two {
height: 200px;
background: black;
color: white;
overflow-y: scroll;
}
<section>
<div id="one"></div>
<div id="two"> SCROLL TO HIDE MENU<br> shows/hide, which is working great! Now, I want to hide the menu when the user scrolls down the widown, then the show/hide on hover functionality takes place again. Below is my working code:
byClass('nav-toggle')[0].addEventListener('mouseover', showNav);
byClass('nav-wrap')[0].addEventListener('mouseleave', hideNav);
I try to add something like this:
byClass('nav-wrap')[0].addEventListener('scroll', hideNav);
.. but it didn't work. I guess its because I have to specify that I want to hide when the "window" is scrolled down?
Any help would be very appreciated.So, I have a nav that when I hover the icon, shows/hide, which is working great! Now, I want to hide the menu when the user scrolls down the widown, then the show/hide on hover functionality takes place again. Below is my working code:
byClass('nav-toggle')[0].addEventListener('mouseover', showNav);
byClass('nav-wrap')[0].addEventListener('mouseleave', hideNav);
I try to add something like this:
byClass('nav-wrap')[0].addEventListener('scroll', hideNav);
.. but it didn't work. I guess its because I have to specify that I want to hide when the "window" is scrolled down?
Any help would be very appreciated.So, I have a nav that when I hover the icon, shows/hide, which is working great! Now, I want to hide the menu when the user scrolls down the widown, then the show/hide on hover functionality takes place again. Below is my working code:
byClass('nav-toggle')[0].addEventListener('mouseover', showNav);
byClass('nav-wrap')[0].addEventListener('mouseleave', hideNav);
I try to add something like this:
byClass('nav-wrap')[0].addEventListener('scroll', hideNav);
.. but it didn't work. I guess its because I have to specify that I want to hide when the "window" is scrolled down?
Any help would be very appreciated.So, I have a nav that when I hover the icon, shows/hide, which is working great! Now, I want to hide the menu when the user scrolls down the widown, then the show/hide on hover functionality takes place again. Below is my working code:
byClass('nav-toggle')[0].addEventListener('mouseover', showNav);
byClass('nav-wrap')[0].addEventListener('mouseleave', hideNav);
I try to add something like this:
byClass('nav-wrap')[0].addEventListener('scroll', hideNav);
.. but it didn't work. I guess its because I have to specify that I want to hide when the "window" is scrolled down?
Any help would be very appreciated.</div>
</section>

Jquery slideToggle to slide a div from the top of the screen - but top of screen changes during scroll and div is not visible

I am using Jquery slideToggle to slide a div from the top of the page. The effect is working, and can be seen here (PLEASE HOVER OVER THE MEMBER LOGIN NAV BUTTON TO SEE EFFECT, the blue div will slide down):
My issue is, that when the page is scrolled downwards, the div is still sliding down from the very top of the document, not the top of the viewport window, so it is not visible. If you scroll down the page, and hover over member log in button on the right, you will see the problem (main nav moves down, but the hidden blue div is no longer visible).
I am wondering how I can recalculate where the top is, and tell slidetoggle to slide the blue down from there.
This may be helpful, the code I am using to affix the regular nav to the top of the page is the following:
$(function() {
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});
});
Looks like you'll have to change your script around a bit, but the way I'd go about this is to wrap all your nav elements (the login form and the nav bar) in a div and give that div
position: fixed;
That way your nav will be fixed at the top of the window and the login form will remain at the top of the screen regardless of scrolling.
Like this:
HTML:
<div id="nav-section-wrapper">
<div id="login">...</div>
<div id="nav-wrapper>...</div>
</div>
CSS:
#nav-section-wrapper {
position: fixed;
top: 0;
z-index: 1;
}

Scroll to top visibility

I'm new to Javascript and using Jquery and I ran into a problem.
I made a scroll-to-top button which should be visible when you start scrolling down. I got it to work, when I click it I smoothly scroll to the top and when you're at the top it disappears.
Only when I first load the page it's already visible, then when I scroll down it briefly disapears untill I reach the point where the element is located and it pops up again when you scroll down even more. Here is my code:
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('#backTop a').fadeIn();
}
else {
$('#backTop a').fadeOut();
}
});
$('#backTop a').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
You'll also need to change the CSS of the button. By default, the element would be shown after all the elements before it in the HTML are displayed. You can change the CSS to ensure the element sticks to the bottom of the viewport always:
#backTop a{
position: fixed;
display: none;
bottom: 10px;
right: 10px;
}
Fixed positioning ensures that your div always stays at the same position. You can place the element by using the top, right, left and bottom rules. I've set the display to none because initially the back-to-top button should not be visible.

Categories

Resources