ScrollTop Jquery not working properly - javascript

I have been using the ScrollTop JQuery so that when buttons are clicked in the right hand column, they scroll to the specific id in the left. It goes to the specific id when I first load the page, but after that it doesn't go to the other three, but glitches out going up or down slightly when buttons are clicked. I found that when I scroll to the top of the page and click the link it goes to the correct place, so it seems it it trying to find the top position of the left column and trying to go from there. No ideas as to how to fix this so would appreciate any thoughts.
CSS:
html,
body {
height: 100%;
margin: 0px auto;
}
#main,
#col_l,
#col_r
{
height: 100%;
}
div[id*="col"]{
float: left;
width: 50%;
overflow: auto;
}
#col_r{
overflow:hidden;
position:relative;
}
JS:
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="jquery.scrollTo-1.4.3.1-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#stsp").click(function() {
$('#col_l').animate({
scrollTop: $("#lgg").offset().top}, 2000);
});
$("#fg").click(function() {
$('#col_l').animate({
scrollTop: $("#funny").offset().top}, 2000);
});
$("#covers").click(function() {
$('#col_l').animate({
scrollTop: $("#coverso").offset().top}, 2000);
});
$("#demo").click(function() {
$('#col_l').animate({
scrollTop: $("#mp3").offset().top}, 2000);
});
});
HTML:
<div id="col_r">
<div id="hb"><button id="demo">One × Fifteen (64mb) </button></div>
<div id="lg"><button id="stsp">Same Time Same Place</button></div>
<div id="fg"><button id="funny">Funny Games Funny Games</button></div>
<div id="c"><button id="covers">Covers Over Covers</button></div>
</div>

This was fixed this using the ScrollTo Jquery:http://flesler.com/jquery/scrollTo/
I'm not sure why I was having problems with the ScrollTop Jquery.

Related

jQuery Animate Method's Duration Property not working

I'm trying to apply a smooth scroll animation on my webpage when the navbar links are clicked.
But the animate method isn't working and the links won't go to the next section when clicked thus leaving me stuck at the top most section when clicking the links.
I solved this by using the minified ver. of jQuery CDN instead of the slim minified.
Although the links go to their specified sections, the smooth scrolling effect still doesn't apply. They just skip to the next as though the duration property in my jQuery doesn't exist.
Am I doing something wrong here? I'm using Bootstrap 4 and I even tried including the jQuery UI CDN but it still doesn't work.
Also, I found this on my console output could this be the one that's causing the problem?
// Doesn't do the duration
$(".navbar a").click(function(e) {
e.preventDefault();
$("html, body").animate({
scrollTop: $(this.hash).offset().top
}, 1000);
});
<!-- The CDN's that I'm using -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
I don't see an issue with your code. Testing here:
$(function() {
function jumpTo(el, ms) {
$("html, body").animate({
scrollTop: $(el).offset().top - 2
}, ms);
}
$(".navbar a").click(function(e) {
e.preventDefault();
jumpTo(this.hash, 1000);
});
});
.navbar,
.content {
padding-top: 10px;
}
.content {
height: 1400px;
}
.article {
width 95%;
height: 340px;
border: 1px solid #ccc;
border-radius: 6px;
margin-top: 10px;
}
#bar-1 {
background: #ccd;
}
#bar-2 {
background: #cdc;
}
#bar-3 {
background: #dcc;
}
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<a id="top"></a>
<div class="navbar">
Bar 1
Bar 2
Bar 3
</div>
<div class="content">
<div id="bar-1" class="article">Bar 1</div>
Back to Top
<div id="bar-2" class="article">Bar 2</div>
Back to Top
<div id="bar-3" class="article">Bar 3</div>
Back to Top
</div>
Seems smooth to me.
Changed the code to:
$(".navbar a").click(function(e) {
e.preventDefault();
document.querySelector(this.hash).scrollIntoView({
behavior: "smooth"
});
});
here's the reference, thanks again! #jqueryHtmlCSS

How do I trigger jQuery when an anchor reaches the top of the viewport?

I need to trigger a jQuery function on a div when an anchor reaches the top of the viewport.
There are a lot of posts on StackOverflow based on an element entering the viewport (i.e the bottom of the viewport) see here for example.
Is it possible to trigger jQuery for the .nav-down element when the anchor #trigger hits the top of the view port?
HTML:
<div class="spacer"></div>
ANCHOR
<div class="nav-down"></div>
<div class="spacer"></div>
jS:
function scroll_style() {
var window_top = $(window).scrollTop();
var div_top = $('#trigger').offset().top;
if (window_top > div_top){
$('.nav-down').css("background","green");
}
}
$(function() {
$(window).scroll(scroll_style);
scroll_style();
});
This jS/jSFiddle doesn't work as intended, but it'll give an idea of the thought process I have:
https://jsfiddle.net/vanstone/s643m85b/14/
Can anyone assist me with getting this to work?
You can try using the getBoundingClientRect() to get the position of <a> with respect to the viewport and then implement your logic.
In the below example, I am checking for top < 10 to factor in the height of <a>
function scroll_style() {
if ($('#trigger')[0].getBoundingClientRect().top < 10) {
$('.nav-down').css("background", "green");
} else {
$('.nav-down').css("background", "yellow");
}
}
$(function() {
$(window).scroll(scroll_style);
scroll_style();
});
.spacer {
height: 700px;
background: red;
}
.nav-down {
height: 250px;
width: 100%;
background: blue;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div class="spacer"></div>
ANCHOR
<div class="nav-down"></div>
<div class="spacer"></div>

Why is my jQuery toggle not working?

I'm trying to set up a side menu and having some trouble with the jQuery Toggle. Everything else seems to function fine. I did try for a about 2 hours before posting here, so been getting a little frustrated (seeing how this is pretty basic stuff). Any suggestions?
Below is the format and exact order of my page layout, I only added separator text ("The side menu", "Image I click..", etc.) to make reading/understanding easier. Any help would be greatly appreciated.
The side menu:
<div id="SideMenu" class="sidenav">
<img class="CloseBtn" src="./wht_menu.png" />
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
Image I click to open the menu:
<img class="OpenBtn" src="./blk_menu.png" />
The rest of my page:
<div id="main">
My main page content goes here...
</div>
My CSS & jQuery:
<!--Slider Menu-->
<script>
$(".OpenBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
</script>
<style>
#SideMenu{
width: 250px;
display: none;
}
</style>
You need to wrap the jQuery in this block (docs):
$( document ).ready(function() {
$(".OpenBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
});
Working example using your code:
http://codepen.io/anon/pen/xEaqqA
There is a possibility that jQuery not loaded on page at the time.
<script>
(function($){
$(document).ready(function(){
$(".OpenBtn, .CloseBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
});
})(jQuery);
</script>
Thanks for your help everyone! Although pivemi's answer was not the solution, a deeper review of his codepen link got things working, my doc wasn't calling on the jQuery library. Adding this to the top was my solution:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
Your CSS could look like this:
.menu {
position: fixed;
height: 100%;
width: 272px;
padding-bottom: 50px;
overflow: auto;
box-shadow: 0 0 10px 0 rgba(0,0,0,.75);
background-color: #fff;
z-index: 999;
display: none;}
And your jQuery script:
$(document).ready(function(){
$('.show-menu').click(function(){
fade_menu();
});
$('.menu-item').click(function(){
fade_menu();
});});});
function fade_menu(){
$('.menu').fadeToggle("fast");
}

Forcing a scroll trigger after certain points

So what I want to do is have a page that is split into 4 divs (let's say 1, 2, 3, and 4). So whenever I try to scroll down after div 1, the page would automatically scroll to div 2; if I try to scroll my mouse down below div 2, it would scroll automatically to div 3; and the same way for div 3 to div 2, etc. I'm sure you have seen something similar to this in some online pages (can't think of any right now but if I find something I will link it).
Basically what it would do is, when you scroll up from a div it would animate the transition to the top of the previous div on its own.
I tried using jQuery and doing scrollTop, but couldn't get it to work.
See this:
$('html, body').animate({scrollTop: $('#div1').offset().top},'slow');
The whole code took me a long time to make
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
var n=1;
var classes=$('.class').length;
$(window).bind('mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
n--;
n=n<1?1:n;
} else {
n++;
n=n>classes?classes:n;
}
//to prevent duplicate event
setTimeout(function () {
$('html,body').animate({scrollTop: $('.class[data-number='+n+']').offset().top},'fast');
},10);
});
});
</script>
<style>
html, body {
margin: 0;
height: 100%;
}
.class{
height: 100%;
}
.class:nth-child(2n){
background: red;
}
.class:nth-child(2n+1){
background: blue;
}
</style>
</head>
<body>
<div class="class" data-number="1" ></div>
<div class="class" data-number="2" ></div>
<div class="class" data-number="3" ></div>
<div class="class" data-number="4" ></div>
</body>
</html>

jQuery getting the margin-top needed to put element on the top of the screen

I've got a problem in internet explorer 6 and FF with something I'm trying to implement in jQuery. Basically there is an object at the top of the page using floated content that seems to be interfering with the $(window).scrollTop() property.
It was my understanding (and if I'm wrong, please help me by telling me the right way!) that $(window).scrollTop() would return the whitespace hidden by scrolling. I did some tests without the floated content and they seem to support this.
This is my code:
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 180) { //is the window scrolled enough to hide the header?
var $myDiv = $("#scrollingDiv");
if ($myDiv.is(":hidden")) { //if mydiv is currently hidden, show it
$myDiv.show();
}
$myDiv.stop();
$myDiv.animate({ marginTop: ($(window).scrollTop()) + "px" }, "fast", function() { /*animation complete*/ }); //move mydiv to the top edge of the page... OR SO I THOUGHT!
}
else { //otherwise hide it, since the header is visible
$("#scrollingDiv").hide();
}
});
});
This is the html document that shows the error (you just comment out the "evilFloatomoton" div below to see it working properly)
<HTML>
<HEAD>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 180) {
var $myDiv = $("#scrollingDiv");
if ($myDiv.is(":hidden")) {
$myDiv.show();
}
$myDiv.stop();
$myDiv.animate({ marginTop: ($(window).scrollTop()) + "px" }, "fast", function() { /*animation complete*/ });
}
else {
$("#scrollingDiv").hide();
}
});
});
</script>
<style type="text/css">
<!-- Enter any CSS to make objects viewable here -->
#scrollingDiv
{
width: 100%;
position: absolute;
margin-top: 0px;
}
</style>
</HEAD>
<BODY>
<!-- Enter in test elements here -->
<div style="overflow: auto;">
<div id="evilFloatomoton" style="float: left; height: 200px; width: 100%;">
CONTENT<br /><br />
</div>
</div>
<div id="scrollingDiv" style="background-color: #000; color: #FFF;">
Scrolling floating div of doom
</div>
<div style="height: 180px; border: solid 1px #000;">
*Highlight the 180 px scroll area*
</div>
<div style="height: 10000px;">
</div>
</BODY>
</HTML>
So instead of being against the top edge like I thought, it's halfway down the page in my tests. Can anyone help me?
For your scrollingDiv container, set the style to Position:absolute and top: 0px. That should keep your floating div in one spot.

Categories