Scrolltop Jquery, Scrolling to Div with Id

scrollTop jQuery, scrolling to div with id?

instead of

$('html, body').animate({scrollTop:xxx}, 'slow');

use

$('html, body').animate({scrollTop:$('#div_id').position().top}, 'slow');

this will return the absolute top position of whatever element you select as #div_id

Smooth scroll to div id jQuery

You need to animate the html, body

DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/1/

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});

JQuery scroll li id to top of div

See the code below. Hope this will be helpful for you.

var container = $('#QuestionScroller'),    scrollTo = $('#ListItemQuestion');    container.animate({scrollTop: scrollTo.offset().top - container.offset().top +                        container.scrollTop()});

#QuestionScroller {    width: 200px;    height: 70px;    border: 1px solid blue;    overflow: auto;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="QuestionScroller">    <ul>        <li id='row_1'>111111</li>        <li id='row_2'>222222</li>        <li id='row_3'>333333</li>        <li id='ListItemQuestion'>444444</li>        <li id='row_5'>555555</li>        <li id='row_6'>666666</li>        <li id='row_7'>777777</li>        <li id='row_8'>888888</li>        <li id='row_9'>999999</li>    </ul></div>

Run ScrollTop with offset of element by ID

No magic involved, just subtract from the offset top of the element

$('html, body').animate({scrollTop: $('#contact').offset().top -100 }, 'slow');

jQuery scroll to bottom of ID element

Okay here is the first part -

$('html, body').animate({
    scrollTop: ($("#three").offset().top + $("#three").height() - $(window).height())
}, 500);

just a little bit of Maths and you can easily understand by yourself what's going on.

and for the second part -

if(($('#three').offset().top >= $(window).scrollTop()) && ($('#three').offset().top < $(window).scrollTop() + $(window).height())) { ...
}

A complex comparison of values, to check visibility if top offset of element is in between window scrollTop() and + window height() (i.e something like offset bottom of window).

Check out the fiddle

UPDATE: there was a bug in the previous one, you need an additional conditional statement to check visibility of the #three by considering bottom offset of the element between window scrollTop() and bottom offset of window. So the full condition will become -

var eloffbottom = $('#three').offset().top + $('#three').height();
var winoffbottom = $(window).scrollTop() + $(window).height();
if((($('#three').offset().top >= $(window).scrollTop()) && ($('#three').offset().top < winoffbottom)) || ((eloffbottom >= $(window).scrollTop()) && (eloffbottom < winoffbottom))) {
                alert('already in view');
    }

UPDATED Fiddle fully working!

By the way, just found a plugin of jQuery which can do that for you. See here. Just use it as - $('#three').visible() - returns true or false.

How to scroll to top of a div using jQuery?

You could just use:

<div id="GridDiv">
// gridview inside...
</div>

<a href="#GridDiv">Scroll to top</a>

Jquery Smooth Scroll To DIV - Using ID value from Link

Ids are meant to be unique, and never use an id that starts with a number, use data-attributes instead to set the target like so :

<div id="searchbycharacter">
    <a class="searchbychar" href="#" data-target="numeric">0-9 |</a> 
    <a class="searchbychar" href="#" data-target="A"> A |</a> 
    <a class="searchbychar" href="#" data-target="B"> B |</a> 
    <a class="searchbychar" href="#" data-target="C"> C |</a> 
    ... Untill Z
</div>

As for the jquery :

$(document).on('click','.searchbychar', function(event) {
    event.preventDefault();
    var target = "#" + this.getAttribute('data-target');
    $('html, body').animate({
        scrollTop: $(target).offset().top
    }, 2000);
});

Scroll to id function jQuery

To avoid writing duplicate code, you could do a little something like this:

$(function() {
  $('li').on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({
      scrollTop: $($(e.target).attr("href")).offset().top
    }, 1000);
  });
});

nav {
  position: fixed;
  top: 0;
  left: 0;
}

div {
  margin: 100px 0 0 0; 
  width: 100%;
  height: 500px;
}

div:nth-child(even) {
  background: #ccc;
}

div:nth-child(odd) {
  background: #4c4c4c;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li><a href="#1">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
  </ul>
</nav>

<div id='1'></div>
<div id='2'></div>
<div id='3'></div>
<div id='4'></div>

Scroll to an element with jQuery

Assuming you have a button with the id button, try this example:

$("#button").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

I got the code from the article Smoothly scroll to an element without a jQuery plugin. And I have tested it on the example below.

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#click").click(function (){
                $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                }, 2000);
            });
        });
    </script>
    <div id="div1" style="height: 1000px; width 100px">
        Test
    </div>
    <br/>
    <div id="div2" style="height: 1000px; width 100px">
        Test 2
    </div>
    <button id="click">Click me</button>
</html>

---

Related Topics