If we need to jump to top section then we can simple write a code
link to top
or just javascript code
location.href=#top
Result : It takes us to top page with url :http://fiddle.jshell.net/_display/#top.
But what my problem is, I dont' want to show /#top query on url string but i want my page to that top section . Reason why i don't want to show that string in url is, my page get stuck if browser don't find 'id' named top .Context or information which i'm displaying is inside a dialog box so that once the dialog box is closed there isn't any id named top then when user tries to refresh that page i.e http://fiddle.jshell.net/_display/#top , page gets stuck .
Can anyone give a better solution for this problem?
You have few options...
You can use pure Javscript:
window.scrollTo(X, Y); (obvisourly X and Y are the scroll coordinates, and top will be 0,0).
Another option (yet non-jQuery based) can be:
document.body.scrollTop = document.documentElement.scrollTop = 0;
If you prefer jQuery based solution, try the following:
$(document).scrollTop(0);
Or, as well:
$(window).scrollTop(0);
Use the option that better suit your need.
Enjoy coding.
Try
$(".link").on("click", function(e) {
$("body").animate({scrollTop: $(".link").not(this).offset().top}, 500);
return false
})
#top, #bottom {
height:400px;
width:100%;
display:block;
}
div:nth-of-type(1) {
background:blue;
}
div:nth-of-type(2) {
background:orange;
}
span {
background:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="top">top <span class="link">go to bottom</span></div>
<div id="bottom">bottom <span class="link">go to top</span></div>
Demo Here
Html
<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>
Jquery
$(document).ready(function (){
$("#click").click(function (){
//$(this).animate(function(){
$('html, body').animate({
scrollTop: $("#div1").offset().top
}, 2000);
//});
});
});
Related
All Macs have this option to show scrollbars but it is turned off by default.
I was wondering if there is a way to show scrollbars even if this option is turned off?
Or is there some sort of alternative (JS/jQuery) that I could use that just puts in an arrow and triggers some sort of scrolling function?
Basically something that would work to scroll without technically having a scrollbar.
Edit
As suggested I've started looking into the scrollTop() function in jQuery. Is there a way to get the current_position variable to get where the scrollbar should be?
$(document).ready(function(){
// var current_position = $("#container").get_current_position();
$("#up").bind("click", function(){
$("#container").scrollTop(current_position - 100);
});
$("#down").bind("click", function(){
$("#container").scrollTop(current_position + 100);
});
});
#container{
width:200px;
height:200px;
padding:20px;
background-color:#e33;
overflow:hidden;
}
#inner{
width:200px;
height:1000px;
background-color:#33e;
}
#up,#down{
width:240px;
height:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="up">
Up
</button>
<div id="container">
<div id="inner">
</div>
</div>
<button id="down">
Down
</button>
There are libraries (e.g. https://www.jqueryscript.net/other/iOS-Style-Custom-Browser-Scrollbar-with-jQuery-CSS.html) which add custom scrollbars to pages by js, but you should really question this idea since you are changing the default usability behavior of the browser.
If you just want a button to scroll you can easily implement this e.g. with jquery. See: https://api.jquery.com/scrollTop/#scrollTop2
You can use scrollTop without parameter to get the current scroll position on the page, and if you need you can additional read out the pageheight ($(document).height();) and the viewport height ($(window).height();) in order to calculate the percentage of the page which is shown and where the actual position is relative to the content. See http://api.jquery.com/height/
The closest thing you can get to the scrollbars always being on is using CSS to style the scrollbar.
It won't work in all browsers though
This code does what I want it to do now:
$(document).ready(function(){
$("#up").bind("click", function(){
var current_position = parseInt($("#container").scrollTop());
$("#container").scrollTop(current_position - 100);
});
$("#down").bind("click", function(){
var current_position = parseInt($("#container").scrollTop());
$("#container").scrollTop(current_position + 100);
});
});
#container{
width:200px;
height:200px;
padding:20px;
background-color:#e33;
overflow:hidden;
}
#inner{
width:200px;
height:1000px;
background-color:#33e;
}
#up,#down{
width:240px;
height:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="up">
Up
</button>
<div id="container">
<div id="inner">
</div>
</div>
<button id="down">
Down
</button>
<br />
I need to move the entire div content from bottom to top on load, After 30 seconds onload i need to replace the #content-box to #content-box2
<script type="text/javascript">
$("document").ready(Show_Alert());
function Show_Alert() {
$(function(){
$("#content-box").animate({'bottom': 1900},700);
});
}
</script>
<div id = "content-box">
qwerty
</div>
<div id = "content-box2">
1234567890
</div>
Use this script:
$(document).ready(function(){
setTimeout('Show_Alert()', 30000);
});
function Show_Alert() {
$("#content-box2").animate({'bottom': '1900px'},2000);
}
And this CSS:
#content-box2 { position: absolute; bottom:0; left:0; width: 100%; }
If it doesn't help you could you please provide us the CSS for the content boxes and tell us what exactly should be happening after 30sec?
to replace as you said in comment .. -in your case- you can use .html()
$('#content-box').html($('#content-box2').html());
or you can use .text()
$('#content-box').text($('#content-box2').text());
+++++i add mention+++++
thanks guys for your answers,
but, i think, i missed something to write more.
when i click the button to show the div(#pop), it works right at the scroll on the top.
but, when i go down the scroll, the div(#pop) goes up in the window(height:0) not in "bottom:10%" like at the scroll on the top.
so, i'm trying your answers now, but, i'm not succeed yet T_T HELP!! :)
=================================================================================
Here are my codes.
I have a floating menu and one button of them works for showing a div id = pop, which is floating too.
I want to hide the div #pop when window starts, and when the button's clicked, it shows.
So I added codes display:none to hide, but when i click the button to show the div #pop, the div #pop is anywhere, not in bottom: 10% in CSS.
HTML
<div class="menu">
<img src="btnUp.png"><br/>
<img src="btnMe.png" id="pop_bt"><br/>
<a href="#scrollbottom">
<img src="btnDown.png">
</a>
</div>
<div id="pop">
<div>
POP UP
</div>
</div>
CSS
#pop{
display: none;
width: 300px;
height: 400px;
background: #3d3d3d;
color: #fff;
position: absolute;
bottom :10%;
left: 30%;
z-index: 3;
}
Javascript
$(document).ready(function(){
var boxtop = $('.menu').offset().top;
$(window).scroll(function(){
$('.menu').stop();
$('.menu').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
});
});
$(document).ready(function() {
$('#pop_bt').click(function() {
$('#pop').show();
});
$('#pop').click(function() {
$('#pop').hide();
});
});
$(document).ready(function(){
var boxtop = $('#pop').offset().top;
alert(boxtop);
$(window).scroll(function(){
$('#pop').stop();
$('#pop').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
});
});
Actually, I'm not a programmer, just a designer, so I'm very fool of HTML/CSS/Javascript.
Can anyone help me?
Display none is removing your button from the layout.
Same on .hide().
Use opacity 0 to hide the dig but keep it in your browser.
In the absence of a fiddle, I can do some guess work only. Looks like the line below is the problem:
$('#pop').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
It sets a top value and moves the layer to some other place. It should work fine if you remove that.
use this...
$(document).ready(function()
{
$("#pop").hide();
$("#button_id").click(function()
{
$("#pop").show();
});
});
is this you actually need?
the code I'm searching for is very simple, simply I have divs and menu and I want that when I arrive to the first div by scrolling, the first ul in menu change its style automatically, then when I scroll to the second div the second url style change to another style, and like that... I got the answer for my question and I have the code but I don't like it because it's very tall and it contain codes for every div I got.
As I know I can find ONE short code that does the job for the WHOLE divs in jQuery.
What I want is exactly as in this code(I'm not able to let it work through http://jsfiddle.net/ if anybody knows how to load jquery there please load it and give me the url)
<html>
<style>
#menu {
background-color:#ccc;
position:fixed;
width:100%;
}
.menutext {
padding:25 40 30 !important;
display:inline-block;
}
.menutext2 {
padding:25 40 0 !important;
display:inline-block;
color:red;
}
.alldivs {
width:300px;
height:200px;
background-color:a9a9a9;
}
</style>
<div id="menu">
<div class="menutext" linkId="DIV1">Change the style of me to .mebutext2 on arriving to DIV1</div>
<div class="menutext" linkId="DIV2">Change the style of me to .mebutext2 on arriving to DIV2</div>
<div class="menutext" linkId="DIV3">Change the style of me to .mebutext2 on arriving to DIV3</div>
</div>
<br><br><br><br><br><br><br>
<div class="alldivs"><div class="contentDiv" id="DIV1">DIV1</div></div>
<br><br><br><br><br><br><br><br>
<div class="alldivs"><div class="contentDiv" id="DIV2">DIV2</div></div>
<br><br><br><br><br><br><br><br>
<div class="alldivs"><div class="contentDiv" id="DIV3">DIV3</div></div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function(){
var menu=$('#menu'),
menuText=menu.find('.menuText'),
DIV1=$('#DIV1'),
DIV2=$('#DIV2'),
DIV3=$('#DIV3'),
DIV1Top=DIV1.offset().top,
DIV2Top=DIV2.offset().top,
DIV3Top=DIV3.offset().top;
$(window).scroll(function(e) {
var win=$(this),
scrollTop=$(this).scrollTop();
//to make nav menu selected according to scroll
var start=scrollTop;
menuText.filter('.menutext2').removeClass('menutext2').addClass('menutext');
if(start>DIV3Top){
menuText.filter('[linkId="DIV3"]').removeClass('menutext').addClass('menutext2');
}
else if (start>DIV2Top){
menuText.filter('[linkId="DIV2"]').removeClass('menutext').addClass('menutext2');
}
else if(start>DIV1Top){
menuText.filter('[linkId="DIV1"]').removeClass('menutext').addClass('menutext2');
}
});
});
</script>
Something like this :
$(function(){
var offsets = [],
menuText = $('#menu .menuText');
$("div.contentDiv").each( function(i, div) {
offsets.push({ id: div.id, offset: $(div).offset().top });
});
$(window).scroll(function(e) {
var start = $(this).scrollTop();
for ( var div = 0; div < offsets.length; div++ ) {
if ( start > offsets[div].offset ) {
menuText.removeClass('menutext2').addClass('menutext');
menuText.filter('[linkId="'+offsets[div].id+'"]').addClass('menutext2').removeClass('menutext');
}
}
if ( start === 0 ) { menuText.removeClass('menutext2').addClass('menutext'); }
});
});
http://jsbin.com/ijiwom/2/edit
EDIT :
http://jsbin.com/ijiwom/3/edit
EDIT 2 :
http://jsbin.com/ijiwom/4/edit
EDIT 3 :
http://jsbin.com/ijiwom/5/edit
dringchev gave you a working example.
what you are describing is sometimes called a "scroll spy", for example here in bootstrap:
http://twitter.github.io/bootstrap/javascript.html#scrollspy
you could also implement it using jquery waypoints
http://imakewebthings.com/jquery-waypoints/
See https://ux.stackexchange.com/questions/17375/what-is-the-navigation-concept-bootstrap-uses-called for a discussion of this UX pattern
I have created a customized menu. See here. On click of this link I have a shadowbox popping up which has a long list of items. Now I want to have a "back to top" anchor link which takes me back to the top of the menu list.
I've set your lightbox with the #box id.
Html
<div id="box">
...
<!-- long content there -->
To Top
</div>
CSS (setting the width of elements)
#box {
position:relative;
width:200px;
height:250px;
overflow:auto;
}
#box #toTop {
position:absolute;
display:none;
left:150px;
top:10px;
}
jQuery
$('#box').bind('scroll', function(e) {
if ($(this).scrollTop() > 100) {
$('#toTop').fadeIn();
$('#toTop').css({'top' : $(this).scrollTop() + 100});
} else {
$('#toTop').fadeOut();
}
});
$(document).on('click', '#toTop', function(e) {
e.preventDefault();
//$('#box').scrollTop(0); //just go to top
$('#box').animate({scrollTop : 0},'slow'); //animate
});
Fiddle
Pretty easy with:
document.querySelector("iframe").contentWindow.scrollTo(0,0);
Now put a button on the page and call that on click. Oh, and omit the height:100% on your body of the iframe, this way you get rid of the second scrollbar.
You can try this out by just pasting the line above and executing it in the console of your browser with your webpage.