I have a jQuery selectmenu list which opens as a popup because it so long. What I'd like is a "back to top" button at the end of the list. I found this tutorial which looks like it should do the trick, except that it doesn't show the "Back to Top" text because I imagine that it's underneath the popup. Any ideas how to get around this? Or another implementation of a "back to top" solution?
Break it down by parts. The Back to Top will automatically put you on the top of the page. It's no rocket science.
Then you can add some styling via CSS. In this case the tutorial uses the class "back to top". Back to Top. You can make this look like whatever you want, no big deal.
However, I'll recommend you keep this bit of code, since is the one that positions it. position: fixed; bottom: 2em; right: 0px;. As a side note, replace position:fixed with position:relative, so it appears on the popup.
Then, you can add some nice smooth scrolling effects or whatever you want.
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
Tell me how it goes. Cheers, Sebastian.
Related
A working demo of a template I've modified can be found at the following url:
https://newbloggerthemes.com/base-wp-blogger-template/demo/
I've been unable to determine what is causing a annoying bounce of the fixed navigation menu. If you scroll the page downward the menu should move upward and stop when its top border reaches the top of the page; however, it actually moves just past the top of the page and then snaps back, causing a annoying bounce.
How do I get rid of this bounce? I am assuming that this might be caused by the jQuery code used to query the menu's position. Its as if the code is fixing the issue afterward as opposed to preventing it from happening in the first place.
I've removed the header from the original template so that the menu initially appears at the top; however, when the user first scrolls the page downward the menu bounces in a similar fashion so the defect is in the original template and not due to any changes I've made.
I've posted the modified template at the url below in case the code below is not enough.
https://1drv.ms/t/s!AnHSMVz7JJ2Ocf9KoYS67t_6ZqI
jQuery(document).ready(function($) {
var $filter = $('.main-navigationbwrap');
var $filterSpacer = $('<div />', {
"class": "filter-drop-spacer",
"height": $filter.outerHeight()
});
if ($filter.size())
{
$(window).scroll(function ()
{
if (!$filter.hasClass('fix') && $(window).scrollTop() > $filter.offset().top)
{
$filter.before($filterSpacer);
$filter.addClass("fix");
}
else if ($filter.hasClass('fix') && $(window).scrollTop() < $filterSpacer.offset().top)
{
$filter.removeClass("fix");
$filterSpacer.remove();
}
});
}
});
Okay, you're done removed the header HTML.
Now you can also removed that jQuery. Becuase to make sure your menu navigation position always fixed at the top, you can do that just by CSS only. Example CSS is below.
.site-headerbwrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}
in you case: paste CSS code above before ]]></b:skin> line and then Save your Template
I have a notification that pops up during difference instances on my site, and I'd like that notification to follow the menu that animates when you scroll down.
The code I have is as follows:
<script type='text/javascript'>
var messageFollow = $('.woocommerce-info').offset().top;
$(window).on( 'scroll', function(){
if ($(window).scrollTop() >= messageFollow) {
$('.woocommerce-info').css({top: "150px"});
} else {
$('.woocommerce-info').css({top: "74px"});
}
});
</script>
The notification has a value right now of top: 150px which looks great when you're at the top of the screen but top: 74px looks great when scrolled down.
I also want it to animate, but I have no idea how to implement that as well.
A clip to demonstrate: https://www.dropbox.com/s/p6i95f5gkbyn4nm/MessageNotification.mov?dl=0
jQuery has a built-in animate function.
Just replace css with animate and make sure the value is integer.
You can also give a duration in milliseconds as a second parameter to animate function.
$('.woocommerce-info').animate({top: 150},500);
I have been working on the site https://hotel4meetings.firebaseapp.com/,
where clicking on small map expands a larger map below.
However, when you scroll below that large map and click on the button at the bottom to close the map, the content jumps to another position.
I wonder if it possible to minimise jumping of the content below the closing button?
My reasoning: The user is looking at the content below the closing button, so it is preferable not to move that content.
The site is Angular-based but the problem is not specific to Angular. The same functionality can be achieved e.g. with jQuery.
assuming that .map is your big map container and .close is the button that closes the map:
$('.close').click(function(){
var sctop = $(window).scrollTop();
var maptop = $('.map').offset().top;
dif = maptop - sctop;
if(dif <= 0)
$(window).scrollTop($(window).scrollTop()+dif-100);
$('.map').hide();
});
With animation:
$('.close').click(function(){
$('.map').slideUp(300);
var sctop = $(window).scrollTop() - $('.map').height();
$('html, body').animate({scrollTop : sctop}, 300);
});
Here is the Demo: https://jsfiddle.net/ym0ek6oq/1/
Another Demo: https://jsfiddle.net/ym0ek6oq/2/
It isn't that the content is jumping it's that when you hide the element the space it takes up closes.
You can try using
$("#someID").css("visibility", "hidden");
with
#someID {
display: block;
}
That should do what you are asking but it will leave a blank space within the page.
Maybe you could scroll the page back down when you close the map the same distance it takes up when visible to cancel the apparent jump of content. Not sure it'll give the desired effect though.
Hope this helps,
Tim
I have some menu items on the right hand side of my website that are: -
Basket Summary
Best Sellers
Quick Links
etc
I want the basket summary to follow down the page as the page is scrolled, I know how to this using position: fixed, but I need it to also move the other elements out of the way otherwise it will just overlap them.
I was looking at this: jsfiddle which would do the job and works but obviously thats only on button click, I would need to adapt this to scroll via jQuery.
I have read many tutorials for floated fixed divs but they are all for one div and don't have any other divs to interact with.
Any ideas if possible and/or how to do it?
Code from js fiddle as follows: -
$(function() {
$('.upButton').click(function(e){
var $parent = $('.highlight').closest('.box');
$parent.insertBefore($parent.prev());
});
$('.downButton').click(function(e){
var $parent = $('.highlight').closest('.box');
$parent.insertAfter($parent.next());
});
});
Is this what you're looking for?: http://jsfiddle.net/cmontgomery/YVh4q/
essentially, whenever the window scrolls check to see if your section is in the visible area and if not, adjust accordingly:
$(window).scroll(function () {
var mover = $("#sidebar .quick-links");
if($(window).scrollTop() === 0) {
//console.log("to top");
mover.prependTo("#sidebar");
} else if(!isFullyInViewableArea(mover)) {
var parent = mover.closest('.section');
if(isBelowViewableArea(mover)) {
//console.log("moving up");
parent.insertBefore(parent.prev());
} else {
//console.log("moving down");
parent.insertAfter(parent.next());
}
}
});
I must admit, this solution is not the best user experience, i.e. it jumps instead of scrolling smoothly. If it were me I would put the movable section as the last item in the right column and move that down the page with absolute positioning so it follows the top of the view-able area exactly.
Use this
Drag & Drop is best.
Greetings.
I remember seeing an example of this recently, but for the life of me I can't find the site.
It was a button or something similar that sat in its place near the top of the screen, then when you scroll down it stays on screen.
Now that I think about it, it must have been javascript-powered, but it looked really natural.
Does anyone know of a site with this functionality or information on how to do it?
EDIT
No, it wasn't just position:fixed or permanently floated using javascript.
Thanks durilai for pointing out that this has been covered: How to make an element slide with the viewport as it scrolls?
As it turns out, it was right here on SO (the question editing page) that I saw this. The "How to Format" box sits to the right of the editing box and moves with the rest of the page, but becomes position:fixed when it should be scrolled out of view.
This is done by SO using jQuery. I think they have some custom code there, but here is my implementation:
var scrollerTopMargin = $("#scroll-container").offset().top;
$(window).scroll(function(){
var c = $(window).scrollTop();
var d = $("#scroll-container");
if (c > scrollerTopMargin) {
d.css({ position: "fixed", top: "0px" });
}
else if (c <= scrollerTopMargin)
{
d.css({ position: "relative", top: "" });
}
});