jQuery Scroll to top fade in/out issue

Question 1

Xavier’s Question:

This code has two parts:

The first one is supposed to fade in the .toTop button when the user scrolls down and keep it hide otherwise.

The second part is supposed to bring the user top when clicking on it.

Part two isn’t working when mixed with part one. I can’t find the conflict between the two.

<script>
    $(document).ready(function(){

        $(".toTop").hide();

        $(function () {
            $(window).scroll(function () {
                if ($(this).scrollTop() > 300) {
                    $('.toTop').fadeIn();
                } else {
                    $('.toTop').fadeOut();
                }
            });        
        });        
    });

        var easing, e, pos;
    $(function(){
      $(".toTop").on("click", function(){
        pos= $(window).scrollTop();
        $("body").css({
          "margin-top": -pos+"px",
          "overflow-y": "scroll", 
        });
        $(window).scrollTop(0);
        $("body").css("transition", "all 1s ease");
        $("body").css("margin-top", "0");
        $("body").on("webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd", function(){
          $("body").css("transition", "none");
        });
      });
    });      
</script>

Answer

MG_Bautista

Use this…

$(document).ready(function(){

        $(".toTop").hide();

        $(function () {
            $(window).scroll(function () {
                if ($(this).scrollTop() > 200) {
                    $('.toTop').fadeIn();
                } else {
                    $('.toTop').fadeOut();
                }
            });        
        });        
    });

var easing, e, pos;
    $(function(){
      $(".toTop").on("click", function(){
        pos= $(window).scrollTop();
        $("body").css({
          "margin-top": -pos+"px",
          "overflow-y": "scroll", 
        });
        $(window).scrollTop(0);
        $("body").css("transition", "all 1s ease");
        $("body").css("margin-top", "0");
        $("body").on("webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd", function(){
          $("body").css("transition", "none");
        });
      });
    });

And dee this DEMO

Answer

Starx

First point is that, you have used to many .ready() event handler. Remove all the redundancies:

$(document).ready(function(){

  $(".toTop").hide();

  $(window).scroll(function () {
      if ($(this).scrollTop() > 300) {
           $('.toTop').fadeIn();
      } else {
           $('.toTop').fadeOut();
      }
  });        

  var easing, e, pos;
  $(".toTop").on("click", function(){
    pos = $(window).scrollTop();
    $("body").css({
      "margin-top": -pos+"px",
      "overflow-y": "scroll", 
    });
    $(window).scrollTop(0);

    $("body").css("transition", "all 1s ease");
    $("body").css("margin-top", "0");
    $("body").on("webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd", function(){
      $("body").css("transition", "none");
    });
  });

});

Question 2

Question by Rana Muhammad Usman

Rana Muhammad Usman

I have created a custom scroll. In which I am shifting the contents right and left by increasing or decreasing the margin. I want to restrict the div not to margin more when the last or first content is visible or you can say I want to make it like scroll. How I can restrict the div not to move anymore

$('#left').live('click' , function(){
$('#myDiv').css("margin-left","-=10px");

})
$('#right').live('click' , function(){
$('#myDiv').css("margin-left","+=10px");

})

JS Fiddle

Answer

Answer by Starx

Starx

Define and maximum limit for margin left or right, then use this value to compare before changing its position.

var maxMargin = 500, minMargin = 20;

$('#left').on('click' , function(){
    if($('#myDiv').css("marginLeft") > minMargin) {
        $('#myDiv').css("margin-left","-=10px");
    }
});

$('#right').on('click' , function(){
    if($('#myDiv').css("marginLeft") < maxMargin) {
        $('#myDiv').css("margin-left","+=10px");
    }
});

And use `.on()` rathan than `.live()`, as it has been deprecated.

Question 3

Question by bobighorus

bobighorus

I was wondering how I can realize with jQuery the simple example in the following image.

Basically it’s a fixed-heigt container div and I wish to make the content inside of it (a list of paragraph) scrollable up/down by arrows.

I need arrows commands and no scrollbars and I wish to not use any plugin (if it’s possible), like this old dhtml example.

Consider that I don’t know the exactly height of the entire content, because it’s ajax loaded and so it can be variable.

Any help will be strongly appreciated.

Thanks in advance.

enter image description here

Answer

Answer by Starx

Starx

You are probably looking for scrollTo Plugin. But, If you want to bring native HTML scroll bars, then defining a overflow property, does the job for you.

div { overflow-y: scroll }

Updates

I made a very simple demo of how the scroller can be create with just simple jQuery.

Another demo, with the scroll limits. Perfect to be called a plugin on the making.

Update 2

What you are looking for is click and hold event, which is not available but, we can use mousedown event to build a workaround.

Check a udpated demo

_{Basically, the idea is to start a interval on mousedown and clear on mouseup}

Question 4

Question by user523129

user523129

I have a table with the following:

<table  cellpadding="2" cellspacing="0" > 
<tr>
<td>Contact: </td>
<td width="100px"><div style="overflow-x:scroll; width:100px">ee@yahoo.com</div>
</td>
</tr>
</table>

This code shows an horizontal scroll in the email cell.

When the email is a short one like ee@yahoo.com the scroll shows but it is not enabled as it is not needed, and when the email is longer let’s say

eeeeeeeeeeeeeeeeeeeeeeeeeee@yahoo.com

the scroll enables so you can see the entire email.

This is good, but what I need is the scroll not to show at all when the email is a short one.

How can I do that??

I’ve tried:

overflow-x:auto;

And it does not show the scroll when a short email but when the email is a long one it just cut it no scroll at all. I think this happens because there are no spaces in the email.

Thanks a lot!

Answer

Answer by Starx

Starx

By defining overflow-x: scroll you are indicating for a scroll bar to appear no matter what.

You should use overflow-x:auto. Here is a working demo

Question 5

Question by Kevin

Kevin

When I have a <div> with width: 100%, it is not really 100%:

<div id="div">testtesttesttesttest</div>

...

#div {
  width: 100%;
  background-color: red;
}

Now when you resize the window, so there is a horizontal scrollbar, and you scroll to the right, then the background is vanished. How can I remain the background in this case?

Here you can see the problem in action:
http://beta.ovoweb.net/?i=3

Now when you resize the window and scroll to the right, you can’t see the background anymore. How to fix this?

Answer

Answer by jsumners

jsumners

The 100% value is 100% of the parent’s width or the view port. See the documentation.

Answer

Answer by Starx

Starx

Width: 100%, is highly affected by its margin and margin and padding of its parent (body in your case). SO, reset them first

Something like

body {
    margin: 0;
    padding: 0;
}
#div {
  margin: 0;
  width: 100%;
  background-color: red;
}

DEMO

Tag: scroll

jQuery Scroll to top fade in/out issue

Xavier’s Question:

How to restrict the div to margin right or left

Question by Rana Muhammad Usman

Answer by Starx

And use `.on()` rathan than `.live()`, as it has been deprecated.

how to scroll the content inside of a fixed-height container?

Question by bobighorus

Answer by Starx

Updates

Update 2

HTML tables: horizontal scroll in a td only when needed

Question by user523129

Answer by Starx

100% DIV width is not really 100%

Question by Kevin

Answer by jsumners

Answer by Starx

Please fill the form - I will response as fast as I can!

Xavier’s Question:

Question by Rana Muhammad Usman

Answer by Starx

And use .on() rathan than .live(), as it has been deprecated.

Question by bobighorus

Answer by Starx

Updates

Update 2

Question by user523129

Answer by Starx

Question by Kevin

Answer by jsumners

Answer by Starx

Please fill the form - I will response as fast as I can!

And use `.on()` rathan than `.live()`, as it has been deprecated.