JavaScript that is Responsive to Browser Window Size

[hjanas]

Hi everyone! I have some very basic JS that I am using to create a Return to Top button in my project:

Code: Select all

window.scroll (0.0);
<script>
window.onload=function (){
var top=document.getElementByID ('top');
top.onclick=window.scroll() {window.scrollTo (0.0);}
}
</script>

It works just fine, when the window is full size. It does not work, however, when my browser window is smaller. What do I need to do to make my Return to top button responsive in all browser sizes? Is there a good way to make the return to top button only visible when the scroll bars appear? Thanks in advance!

[NorthEast]

I have a go to top link in this website (bottom right).

To do this, I use the following...


Script:

Code: Select all

$(document).ready(function(){
	/* Scroll to top link (.go-to-top) */
 	/* Check to see if the window is top if not then display button */
	$(window).scroll(function(){
		if ($(this).scrollTop() > 200) {
			$('.go-to-top').fadeIn();
		} else {
			$('.go-to-top').fadeOut();
		}
	});
	/* Click event to scroll to top */
	$('.go-to-top').click(function(){
		/* adjust speed - lower value faster */
		$('html, body').animate({scrollTop: 0}, 300);
		return false;
	});
});

HTML in master page:

Code: Select all

<a class="go-to-top" href="#">Top</a>

CSS:

Code: Select all

a.go-to-top
{
	position: fixed;
	bottom: 0;
	right: 0;
	padding: 0.6em;
	background-color: #CA2A60;
	color: #ffffff;
	display: none;  /* displayed using script */
	opacity: 0.75;
}

a.go-to-top:hover,
a.go-to-top:focus
{
	background-color: #A90163;
	text-decoration: none;
	opacity: 1;
}

[hjanas]

Thanks, Dave! I will give it a go today.

Heather

[hjanas]

Hi Dave (or anyone)!
It is only rendering when I use the full screen mode. Am I missing something?


Heather

[NorthEast]

It works fine for me in all window sizes - does the version on my website work for you?

The CSS should be in the default medium (i.e. not in a medium), and not the tablet/mobile medium.
The HTML should be in your master page.

[hjanas]

Thanks, Dave. My problem was that I did not have the "Use device with media queries" checked in my target. Thanks for your help! Your site is beautiful by the way!

Heather

[PoojaTiwari]

Hi Dave,

I have checked your solution. its working fine in the content body area. I am trying something like this.

Code: Select all

$(window).scroll(function(){
		if ($(this).scrollTop() > 50) {
		$('.title-bar.tab-bar').addClass('fixed');
		} else {
		$('.title-bar.tab-bar').removeClass('fixed');
		}
});

But I am trying to add class in header div with side navigation layout. I am unable to figure out what I am missing here.
Thanks in advance.