I'm trying to put a "scroll up" button on my website, and for some reason it isn't working correctly. The button does appear on the page, but for whatever reason whenever I attempt to click it it just redirects me to the front page of the site. I have no idea what I'm doing wrong.
<script>
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()>="100"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()<="1000"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function(){$("#toTo_button").scrollToTop();});
</script>
<style>
#toTo_button { width:70px;text-align:center;padding:5px;position:fixed;bottom:10px;right:12px;cursor:pointer;color:#666;text-decoration:none; }
#ups a img { opacity:0.7; -moz-opacity:0.7; filter:alpha(opacity=70); }
#ups a:hover img { opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100); }
</style>
<div id="ups">
<img src="http://full4dl.ucoz.com/Support/ups.png" alt="" />
</div>
You have to prevent the default action when you click the anchor, as <a href="/" ... will surely redirect to the home page:
$(function () {
$.fn.scrollToTop = function () {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() >= "100") {
$(this).fadeIn("slow")
}
var scrollDiv = $(this);
$(window).scroll(function () {
if ($(window).scrollTop() <= "1000") {
$(scrollDiv).fadeOut("slow")
} else {
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function (e) {
e.preventDefault(); // ding ding ding
$("html, body").animate({
scrollTop: 0
}, "slow")
})
}
});
$(function () {
$("#toTo_button").scrollToTop();
});
You have a couple issues with your code.
First, you have to trigger the function by binding it to a click event.
$('#toTo_button').click(function(event) {
//do your scroll magic here
});
Secondly, when you trigger that click event, you should pass the event and call event.preventDefault(). This prevents the browser from automatically calling a redirect.
Use event.preventDefault() on the click event of the anchor tag, this will stop the default redirect to the homepage of the site(as you have written a href="/").
This should resolve the issue.
Related
I have a basic back to top Bootstrap button that works perfectly except that its (Bootstrap) tooltip only shows up on the second mouse hovering action, any idea this is not working on the first mouse hovering?
Html side:
<body>
[...]
<a id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button" title="Click to return on the top page" data-trigger="hover" data-toggle="tooltip" data-placement="left"><span class="glyphicon glyphicon-chevron-up"></span></a>
[...]
</body>
</html>
JavaScript side:
<script>
function fadeInBody() {
$('body').fadeIn(500);
}
$(document).ready(function () {
fadeInBody();
$(window).scroll(function () {
if ($(this).scrollTop() > 5) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').click(function () {
$('#back-to-top').tooltip('hide');
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
$('#back-to-top').tooltip('show');
$('[data-toggle="tooltip"]').tooltip();
});
</script>
I managed to reproduce the issue on my side.
I think the underlying problem is related to your jQuery ready event handler, you actually don't need to call $('#back-to-top').tooltip('show');:
<script>
function fadeInBody() {
$('body').fadeIn(500);
}
$(document).ready(function () {
fadeInBody();
$(window).scroll(function () {
if ($(this).scrollTop() > 5) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').click(function () {
$('#back-to-top').tooltip('hide');
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
// Try to comment this out below
// $('#back-to-top').tooltip('show');
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Let me know if you are still facing the issue.
Since you only shared the child element it makes it harder to debug, but I usually put the data-tooltip on the parent element containing the <a> tag. I also never used the data-trigger parameter, but it doesn't seem to be creating the glitch you're talking about.
Is your script loaded at the end of your <body> tag?
Hope this helps!
For the mobile devices I want to convert all the h1 headings to anchors that can scroll smoothly to their target. To achieve that, when a certain device resize occurs, i just wrap the content of the h1 tag with an a tag and then unwrap the content of the a tag when the device comes back to desktop width.
$(document).ready(function() {
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
//the function to convert the heading to an anchor for devices smaller than 780px
function makeResponsive() {
if ($(window).width() < 780) {
if ($('a').length) {
return true;
} else {
$('h1').each(function() {
$(this).contents().eq(0).wrap('');
});
}
} else {
$('a').contents().unwrap();
}
}
//run on document load and on window resize
$(document).ready(function() {
//on load
makeResponsive()
//on resize
$(window).resize(function() {
makeResponsive();
});
});
body,
html,
.main {
height: 100%;
}
section {
min-height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
The Heading
</h1>
<div class="main">
<section></section>
</div>
<div class="main" id="section2">
<section style="background-color:blue"></section>
</div>
The problem is that when the h1 content is converted to an anchor, the smooth scrolling is not happening at all and the anchor just jumps to the target.
Your a-Tag doesn´t get the click event, because you add the listener when it doesn´t exist.
Try this
$(document).on('click', 'a', function(event) {...
Instead of wrapping it in anchors, just add 'mobile-anchor' class to those headings. Then, instead of listening for clicks on anchor, listen for clicks on 'mobile-anchor' and change:
$('html, body').animate({
scrollTop: $('#section2').offset().top
}, 800, function() {
Or even a simpler solution - before the very end of your on click function, add a 'return false;' so the browser doesn't scroll the page down by itself.
EDIT: Also, wrap everything in a single documentReady function and execute the makeResponsive() before adding a click listener.
i want to know how i can scroll down only 1 time from homepage on click of button, if already scrolled then on click button to don't scroll down?
I'm suck with jQuery and i don't know how to do it.
Currently using this code but its always back at #what-is-it id so i don't like this:
$("#scroll").click(function() {
$('html,body').animate({
scrollTop: $("#what-is-it").offset().top},
'slow');
});
if you have solution with javascript its also welcomed.
Just want to scroll down if users is on homepage? And if he back at home page make button again scroll down him.
Just use this styling for the navbar:
#nav {
width: 100%;
background-color: blue;
position: fixed;
bottom: 0;
}
And the solution for jQuery part is in this jsfiddle.
https://jsfiddle.net/Lnq2etu9/5/ - I think what you're looking for is this.
I just edited Sim's code to make it work for you.
Yust unset your click event with jquery off(). Here ist the API: http://api.jquery.com/off/
So update your code like this:
$("#scroll").click(function() {
$('html,body').animate({
scrollTop: $("#what-is-it").offset().top},
'slow');
});
//unset click event:
$(this).off();
});
another possibility is to use one():
The .one() method is identical to .on(), except that the handler is
unbound after its first invocation.
from the API: http://api.jquery.com/one/
$("#scroll").one('click', function() {
$('html,body').animate({
scrollTop: $("#what-is-it").offset().top},
'slow');
});
});
you wrote:
if already scrolled then on click button to don't scroll down?
unset your click function handler with the jquery onscroll function:
$(window).scroll(function() {
$("#scroll").off();
});
...if the user scrolls, this unsets your click event.
EDIT:
I've updated the code, you posted here and in the comment below:
//your scroll function
function scrollDown() {
$('html,body').animate({
scrollTop: $("#nav").offset().top
},'slow');
}
//set your handler on page load
$("body").on("click", "#scroll", scrollDown);
//scrol event handler
$(window).scroll(function() {
var navHeight = 300; // custom nav height
if($(window).scrollTop() > navHeight) {
$('#nav').addClass('goToTop');
//finish scroll animation
$('html,body').finish();
//set event handler to #scroll with your scroll function
$("body").off("click", "#scroll", scrollDown);
} else {
$('#nav').removeClass('goToTop');
//unset event handler
$("body").on("click", "#scroll", scrollDown);
}
});
So this sets your click event to the button, when your navbar is stick to the top and removes it when not.
And here is a link to an example fidde: http://jsfiddle.net/Lnq2etu9/3/
I am trying to achieve the "back to top" feature on a page through simple jquery. The "BACK TO TOP" button appears/disappears as expected.
When it appears if I click on it, I expect it to go to the top of the page, instead nothing happens. I am not sure what's going wrong.
Here's the code:
css:
#btoTop {
padding: 15px 10px;
background: #1f242a;
color: #fff;
position: fixed;
bottom: 0;
right: 15px;
display: none;
cursor:pointer;
cursor:hand;
width:130px;
height:40px;
}
html:
<div id='btoTop'>BACK TO TOP</div>
js:
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 0){
$("#btoTop").fadeIn("slow");
}
else {
$("#btoTop").fadeOut("slow");
}
});
$("#btoTop").click(function(event){
event.preventDefault();
$("html, body").animate({scrollTop:0 },"slow");
});
});
Note: If I call the click function inside the $(window).scroll(), I am able to click the button. But it flickers and doesn't work well with window resize.
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 0){
$("#btoTop").fadeIn("slow");
}
else {
$("#btoTop").fadeOut("slow");
}
$("#btoTop").click(function(event){
event.preventDefault();
$("html, body").animate({scrollTop:0 },"slow");
});
});
});
You're binding click on your button every single time you scroll, which is unnecessary. You should change it:
$(document).ready(function () {
$(window).scroll(function () {
if( $(window).scrollTop() > 0 ) {
$("#btoTop").fadeIn("slow");
} else {
$("#btoTop").fadeOut("slow");
}
});
// Bound a single time
$("#btoTop").click(function ( event ) {
event.preventDefault();
console.log("Clicked the button");
$("html, body").animate({scrollTop:0 },"slow");
});
});
This might not be the problem, but should be changed to avoid strange behaviours in your code.
I figured out the button was not yet available in the DOM when I was trying to click it.
Adding a timer on it worked pretty good. Hope this helps someone out there with similar issue...
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 0){
$("#btoTop").fadeIn("slow");
}
else {
$("#btoTop").fadeOut("slow");
}
});
$timeout( function() {
$("#btoTop").click(function(event){
event.preventDefault();
$("html, body").animate({scrollTop:0 },"slow");
});
}, 500);
});
I have this jquery code which loads more content from hidden div i got it to open and everything works smooth but i want it to close again but i don't know how to do it.
i also want to change loadmore to close when it is open...
Help
html:
Load More
$(function () {
$("moreinfo").slice(0, 4).show();
$("#loadMore").on('click', function (e) {
e.preventDefault();
$("div:hidden").slice(0, 4).slideDown();
if ($("div:hidden").length == 0) {
$("#load").fadeOut('slow');
}
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
});
});
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('.totop a').fadeIn();
} else {
$('.totop a').fadeOut();
}
});
Update:
$(function () {
$("div").slice(0, 4).show();
$("#loadMore").on('click', function (e) {
e.preventDefault();
$(".moreinfo:hidden").slice(0, 4).slideDown();
});
$(".loadLess").on('click', function (e) {
e.preventDefault();
$(".moreinfo:visible ").slice(0, 4).slideUp();
});
});
this will allow it to open and close right away auto...
This function gets the first 4 elements which are hidden and display:block them with the slideDown function. If you want to hide them again, you need to have a reference to these elements BEFORE the slideDown function. Or, if this is appropriate in your html structure, take the last 4 visible div elements and hide them.
So, a function like
$("#loadLess").on('click', function (e) {
e.preventDefault();
$("div:visible").slice(-4).slideUp();
});
In this case, you will need to have an element that will trigger this function to run, most probably at the end of the visible divs
<a id="loadLess">Show less</a>
Having said that, selectors like div:visible or div:hidden are due to cause troubles. You should use some specific class attribute for that, like .contentitems:hidden or something
Edit:
Here's a fiddle link to see it working
and this is the code used in the jsfiddle
<div class="someclass">some content 1 </div>
<div class="someclass">some content 1 </div>
<div class="someclass">some content 1 </div>
<div class="someclass">some content 1 </div>
<div class="someclass">some content 1 </div>
.....
<span id="loadMore">Load More</span>
<span id="loadLess">Load Less</span>
js
$('div').slice(0, 4).show();
$("#loadMore").on('click', function (e) {
e.preventDefault();
$("div:hidden").slice(0, 4).slideDown();
if ($("div:hidden").length == 0) {
$("#load").fadeOut('slow');
}
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
});
$("#loadLess").on('click', function (e) {
e.preventDefault();
$("div:visible").slice(-4).slideUp();
});
Try using toggle()
http://api.jquery.com/toggle/
Here is an example on how you can use it:
JSFiddle