@media screen and (max-width: 600px) {
#site-generator .powered {
visibility: hidden;
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
Showing posts with label div. Show all posts
Showing posts with label div. Show all posts
Friday, 10 February 2017
Saturday, 3 January 2015
scroll to top
--html--
<div id="content">Scroll ↓</div>
<a href="#" id="back-to-top" title="Back to top">↑</a>
--css--
#back-to-top {
position: fixed;
bottom: 40px;
right: 40px;
z-index: 9999;
width: 32px;
height: 32px;
text-align: center;
line-height: 30px;
background: #f5f5f5;
color: #444;
cursor: pointer;
border: 0;
border-radius: 2px;
text-decoration: none;
transition: opacity 0.2s ease-out;
opacity: 0;
}
#back-to-top:hover {
background: #e9ebec;
}
#back-to-top.show {
opacity: 1;
}
#content {
height: 2000px;
}
---js--
if ($('#back-to-top').length) {
var scrollTrigger = 100, // px
backToTop = function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > scrollTrigger) {
$('#back-to-top').addClass('show');
} else {
$('#back-to-top').removeClass('show');
}
};
backToTop();
$(window).on('scroll', function () {
backToTop();
});
$('#back-to-top').on('click', function (e) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 700);
});
}
<div id="content">Scroll ↓</div>
<a href="#" id="back-to-top" title="Back to top">↑</a>
--css--
#back-to-top {
position: fixed;
bottom: 40px;
right: 40px;
z-index: 9999;
width: 32px;
height: 32px;
text-align: center;
line-height: 30px;
background: #f5f5f5;
color: #444;
cursor: pointer;
border: 0;
border-radius: 2px;
text-decoration: none;
transition: opacity 0.2s ease-out;
opacity: 0;
}
#back-to-top:hover {
background: #e9ebec;
}
#back-to-top.show {
opacity: 1;
}
#content {
height: 2000px;
}
---js--
if ($('#back-to-top').length) {
var scrollTrigger = 100, // px
backToTop = function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > scrollTrigger) {
$('#back-to-top').addClass('show');
} else {
$('#back-to-top').removeClass('show');
}
};
backToTop();
$(window).on('scroll', function () {
backToTop();
});
$('#back-to-top').on('click', function (e) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 700);
});
}
Sunday, 1 December 2013
div scroll menu to section jquery
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jquery scroll to particular position/item when click on link</title>
</head>
<body>
<form id="form1" runat="server">
<div >
<p><a id="top">Menu:</a> <!-- Anchor tag placed around the word "Menu" so menu will always be visible -->
<a href="#middle" class="scroll">Middle</a> <a href="#bottom" class="scroll">Bottom</a></p>
<div style="background-color:#c00; width:50%; height:1500px;">Top</div>
<p><a id="middle">Menu:</a> <!-- Anchor tag placed around the word "Menu" so menu will always be visible -->
<a href="#top" class="scroll">Top</a> <a href="#bottom" class="scroll">Bottom</a></p>
<div style="background-color:#2d80e8; width:50%; height:1500px;">Middle</div>
<p><a id="bottom">Menu:</a> <!-- Anchor tag placed around the word "Menu" so menu will always be visible -->
<a href="#top" class="scroll">Top</a> <a href="#middle" class="scroll">Middle</a>
<div style="background-color:#21b81e; width:50%; height:1500px;">Bottom</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".scroll").click(function(event) {
$('html,body').animate({ scrollTop: $(this.hash).offset().top }, 500);
});
});
</script>
</form>
</body>
</html>
Subscribe to:
Posts (Atom)