A lot of scroll jquery plugins work like this:
http://manos.malihu.gr/repository/page-scroll-to-id/demo/demo.html
and
http://alvarotrigo.com/fullPage/#firstPage
They scroll between sections.
Questions:
Are there also plugins or solution that scroll between .html pages:
up (when reached the top it scrolls to the previous page) and
down (when reached the bottom it scrolls to the next page)
Example but not working like I want:
http://vostrel.cz/so/9652944/page.html
It uses these codes:
(function($){
var jump=function(e)
{
if (e){
e.preventDefault();
var target = $(this).attr("href");
}else{
var target = location.hash;
}
$('html,body').animate(
{
scrollTop: $(target).offset().top
},1000,function()
{
location.hash = target;
});
}
$('html, body').hide()
$(document).ready(function()
{
$('a[href^=#]').bind("click", jump);
if (location.hash){
setTimeout(function(){
$('html, body').scrollTop(0).show()
jump()
}, 0);
}else{
$('html, body').show()
}
});
})(jQuery)
See it working here:
http://vostrel.cz/so/9652944/page.html
But it misses (A) when reached the top scroll on page 1 and (B) when reached the bottom scroll on page 2 and (C) when scrolling up scroll upwards, when scrolling down scroll downwards. The example always scrolls in the same direction and that's also a problem.
The above codes are just an example. Maybe someone has much better codes. Main intention is to make my idea clear. Hope this illustrates what I want to achieve. Thanks in advance for any help.
In horizontal scroll (swipe) direction (or it could be changed in vertical direction if you like) it could be done this way:
HTML:
<div data-role="page" id="city" class="demo-page" data-dom-cache="true" data-theme="a" data-prev="prevCity" data-next="nextCity" data-url="city">
<!-- "city", "prevCity" and "nextCity" are used as placeholders and contain the name of the applicable city in our demo files. -->
<div data-role="header" data-position="fixed" data-fullscreen="true" data-id="hdr" data-tap-toggle="false">
<h1>City</h1>
Back
</div><!-- /header -->
<div data-role="content">
<div id="trivia-city" class="trivia ui-content" data-role="popup" data-position-to="window" data-tolerance="50,30,30,30" data-theme="d">
Close
<p>Here some text.</p>
</div><!-- /popup -->
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-fullscreen="true" data-id="ftr" data-tap-toggle="false">
<div data-role="controlgroup" class="control ui-btn-left" data-type="horizontal" data-mini="true">
Previous
Next
</div>
Trivia
</div><!-- /footer -->
JS:
$( document ).on( "pageinit", "[data-role='page'].demo-page", function() {
var page = "#" + $( this ).attr( "id" ),
// Get the filename of the next page that we stored in the data-next attribute
next = $( this ).jqmData( "next" ),
// Get the filename of the previous page that we stored in the data-prev attribute
prev = $( this ).jqmData( "prev" );
// Check if we did set the data-next attribute
if ( next ) {
// Prefetch the next page
$.mobile.loadPage( next + ".html" );
// Navigate to next page on swipe left
$( document ).on( "swipeleft", page, function() {
$.mobile.changePage( next + ".html", { transition: "slide" });
});
// Navigate to next page when the "next" button is clicked
$( ".control .next", page ).on( "click", function() {
$.mobile.changePage( next + ".html", { transition: "slide" } );
});
}
// Disable the "next" button if there is no next page
else {
$( ".control .next", page ).addClass( "ui-disabled" );
}
// The same for the previous page (we set data-dom-cache="true" so there is no need to prefetch)
if ( prev ) {
$( document ).on( "swiperight", page, function() {
$.mobile.changePage( prev + ".html", { transition: "slide", reverse: true } );
});
$( ".control .prev", page ).on( "click", function() {
$.mobile.changePage( prev + ".html", { transition: "slide", reverse: true } );
});
}
else {
$( ".control .prev", page ).addClass( "ui-disabled" );
}
});
CSS:
/* Set the background image sources */
#newyork { background-image: url(../../_assets/img/newyork.jpg); }
#buenosaires { background-image: url(../../_assets/img/buenosaires.jpg); }
#paris { background-image: url(../../_assets/img/paris.jpg); }
#capetown { background-image: url(../../_assets/img/capetown.jpg); }
#seoul { background-image: url(../../_assets/img/seoul.jpg); }
#sydney { background-image: url(../../_assets/img/sydney.jpg); }
/* Background settings */
.demo-page {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
/* Transparent footer */
.demo-page .ui-footer {
background: none;
border: none;
bottom: 0;
}
/* The footer won't have a height because there are only two absolute positioned elements in it.
So we position the buttons from the bottom. */
.control.ui-btn-left, .trivia-btn.ui-btn-right {
top: auto;
bottom: 7px;
margin: 0;
}
/* Custom styling for the trivia source */
small {
font-size: .75em;
color: #666;
}
/* Prevent text selection while swiping with mouse */
.demo-page .ui-header, .ui-title, .control .ui-btn, .trivia-btn {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
DEMO:
http://demos.jquerymobile.com/1.3.2/examples/swipe/newyork.html
DOCUMENTATION:
http://demos.jquerymobile.com/1.3.2/examples/swipe/swipe-page.html
Related
I have a problem I need help with as I am a bit new to Jquery, what I have is a button which is half hidden at the left side of the screen and a menu which is completely hidden from view also at the left side, what I am trying to achieve is, on mobile the user would 'tap' the button which would slide from the side to reveal the full button for which then you would tap the button again which would then slide the menu out from its hidden position on the left. The problem I am having is no matter which approach I take, whenever I tap the half hidden button, it will slide out but then the menu slides out straight away without having to tab the button a second time so if any of you kind folk could point me in the right direction I would really appreciate it.
Here is my code:
$( "#catbutt" ).on("tap",function(e) {
$( "#catbutt" ).animate({left: "0px"},300,'swing');
});
$( "#catbutt" ).on("tap",function(e) {
$( "#categories" ).animate({left: "0px"});
});
Maybe something like this, where you check the #catbutt element's left position, and if it's already 0px, slide out the #categories element, otherwise, just slide out the #catbutt element (heh. catbutt.) :
$( "#catbutt" ).on("tap",function(e) {
if($(this).css('left') == '0px') {
$( "#categories" ).animate({left: "0px"});
}
else {
$(this).animate({left: "0px"}, 300, 'swing');
}
});
You're still going to have to get it to close, too. Here's a Fiddle with it having three stages... the first is the button expanding, the second is the menu expanding, and the third is both the button and menu collapsing: https://jsfiddle.net/wcvg3nby/
Here's the pertinent code from the Fiddle:
CSS
#catbutt {
width: 100px;
height: 20px;
position: fixed;
left: -80px;
background-color: red;
}
#categories {
width: 100px;
position: fixed;
left: -100px;
}
HTML
<div id='catbutt'></div>
<div id='categories'>
<div>Cat 1</div>
<div>Cat 2</div>
<div>Cat 3</div>
<div>Cat 4</div>
</div>
JS
$('#catbutt').on('click', function() {
if($(this).offset().left < 0) {
$(this).animate({'left':'0px'});
}
else if($(this).offset().left == 0) {
$(this).animate({left: '100px'});
$('#categories').animate({left: '0px'});
}
else {
$(this).animate({left: '-80px'});
$('#categories').animate({left: '-100px'});
}
});
Smooth scrolling effect in JQuery not working in IE & Mozila Browsers, its fine in Chrome browser can any one help on this. iam using this code. some times working in mozila but in IE. please ignore stickit() function.
Thanks in Advance.
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js" > < /script> <
script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" > < /script> <
script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > < /script> <
script src = "scroll_110.js" > < /script>
$(document).ready(function() {
// Add scrollspy to <body>
$('a').scrollspy({
target: "a",
offset: 50
});
// Add smooth scrolling on all links inside the navbar
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('body').animate({
scrollTop: $(hash).offset().top
}, 1200, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
// Create a clone of the menu, right next to original.
jquery('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position', 'fixed').css('top', '0').css('margin-top', '0').css('z-index', '500').removeClass('original').hide();
scrollIntervalID = setInterval(stickIt, 10);
function stickIt() {
var orgElementPos = jquery('.original').offset();
orgElementTop = orgElementPos.top;
if (jquery(window).scrollTop() >= (orgElementTop)) {
// scrolled past the original position; now only show the cloned, sticky element.
// Cloned element should always have same left position and width as original element.
orgElement = jquery('.original');
coordsOrgElement = orgElement.offset();
leftOrgElement = coordsOrgElement.left;
widthOrgElement = orgElement.css('width');
jquery('.cloned').css('left', leftOrgElement + 'px').css('top', 0).css('width', widthOrgElement).show();
jquery('.original').css('visibility', 'hidden');
} else {
// not scrolled past the menu; only show the original menu.
jquery('.cloned').hide();
jquery('.original').css('visibility', 'visible');
}
}
#top,
#middle,
#bottom {
height: 1600px;
width: 900px;
background: green;
}
.menu {
background: #fffff;
color: #333;
height: 40px;
line-height: 40px;
letter-spacing: 1px;
width: 100%;
}
<div class="menu">
Top
Middle
Bottom
</div>
<div id="top">
Top</div>
<div id="middle">
Middle</div>
<div id="bottom">
Bottom</div>
the solution would be to use both html and body in JQ -> $('html,body').animate
see below ( i removed the scrollspy code as it's not relevant to this question, but you should keep it )
$(document).ready(function() {
// Add scrollspy to <body>
// Add smooth scrolling on all links inside the navbar
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html,body').animate({
scrollTop: $(hash).offset().top
}, 1200, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
div {
height: 500px;
width: 100%;
background: red;
border-top: 10px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Section1</li>
<li>Section2</li>
<li>Section3</li>
</ul>
<div id ="section1">
</div>
<div id ="section2">
</div>
<div id ="section3">
</div>
I've got a logo image that in page load is hidden. I'd like that the image would show after page scroll.
Tried that approach:
CSS:
#logo {
display: none;
}
JS/JQuery:
jQuery( document ).ready(function( $ ) {
$(document).scroll(function() {
var scroll = $(this).scrollTop();
if (scroll >=100){
$('#logo').show();
} else {
$('#logo').hide();
}
});
});
Case 1: if page is loaded with scroll = 0, after page scroll logo image doesn't show.
Case 2: if page is loaded with scroll > 100, logo image is show or hidden correctly.
Your code seems to work fine on scroll. If you just need to also conditionally hide/show the image based on the scroll position when the page loads, you can call the hide/show code when the page loads as well as when you scroll the page.
jQuery(document).ready(function($) {
function hideShow(scroll) {
if (scroll >= 100) {
$('#logo').show();
} else {
$('#logo').hide();
}
}
hideShow($(this).scrollTop());
$(document).scroll(function() {
hideShow($(this).scrollTop());
});
});
body {
height: 500vh;
}
#logo {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" id="logo">
I would like to have a scroll to top arrow fixed in my page using angular bootstrap.
Currently I have
<div class="col-md-1">
<div class="affix">
<div>
<a th:href="#{/}" href="#" target="_self"><img id="image" src="source" alt="yoli" width="50px" /></a>
</div>
Scroll to top
</div>
</div>
<div class="col-md-6">
<div id="search-bar" ng-include="blabla"></div>
<li ng-repeat="something"></li>
</div>
However when the "Scroll to top" is click it only works first time since the url changes to ...#search-bar and when you click it again nothing happens. So how do I scroll to top without changing the url?
And also question how do I make the "Scroll to top" only show when the search-bar is not showing?
I was thinking about using $anchorScroll and using id'ed numbers on li and if it's higher then "element-3" then show the button, however not sure if that would work.
UPDATE:
I am thinking of following this example, that is using navigation bars that is #search and #results and make the #search href visible on #results active and #results one hidden.
You can do this without jQuery as well:
function filterPath(string) {
return string
.replace(/^\//, '')
.replace(/(index|default).[a-zA-Z]{3,4}$/, '')
.replace(/\/$/, '');
}
const locationPath = filterPath(location.pathname);
document.querySelectorAll('a[href*="#"]').forEach(link => {
let thisPath = filterPath(link.pathname) || locationPath;
if ((location.hostname == link.hostname || !link.hostname)
&& (locationPath == thisPath)
) {
let hashName = link.hash.replace(/#/, '');
if (hashName) {
let targetEl = document.getElementById(hashName);
if (targetEl) {
link.addEventListener('click', () => {
event.preventDefault();
targetEl.scrollIntoView({
top: 50,
left: 0,
behavior: "smooth"
});
});
}
}
}
});
Here is how you can do it. Create a button:
Scroll To Top
CSS:
.scrollToTop{
width:100px;
height:130px;
padding:10px;
text-align:center;
background: whiteSmoke;
font-weight: bold;
color: #444;
text-decoration: none;
position:fixed;
top:75px;
right:40px;
display:none;
background: url('arrow_up.png') no-repeat 0px 20px;
}
.scrollToTop:hover{
text-decoration:none;
}
JavaScript:
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
You can find a demo here. The source presented is taken from here.
I am creating my product pages by using the object tag code, but every time I click the "view" button, the next page is staying at the same position of previous page which I just viewed. How can I add functionality that will let me view from the top of page every time I click the "view" button?
<div id="container" class="clearfix"><!--! end of #sidebar -->
<div class="holder"></div>
<div id="content" class="defaults"><!-- navigation holder -->
<div id="title2">Office Section</div>
<!-- item container -->
<ul id="itemContainer">
<li>
<div id="product">
<div id="title">FuBang®</div>
<div class="imageOuter" style="margin:0">
<a class="image" href="officesection010.html">
<span class="rollover" ></span>
<img class="imgborder" src="product/officesection/010.jpg" width="165" height="165" />
</a>
</div><br />
<div id="text">Sofa </div><br />
<div id="button">
View Details
</div>
</div>
</li>
</ul>
<br />
<div id="title2"></div>
<div class="holder"></div>
</div>
</div> <!--! end of #content -->
</div> <!--! end of #container -->
When I click the "View Details" button at a specific position "x" here: http://postimg.org/image/vgs0lwhtr/
The next page shows the same position "x", but I want it to jump to the top of page:
http://postimg.org/image/vn80e2lph/
Using Javascript:
document.body.scrollTop = document.documentElement.scrollTop = 0;
Using jQuery:
$(function() {
$('body').scrollTop(0);
});
jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop() > 50) {
$('#backToTop').fadeIn('slow');
} else {
$('#backToTop').fadeOut('slow');
}
});
$('#backToTop').click(function(){
$("html, body").animate({ scrollTop: 0 }, 500);
//$("html, body").scrollTop(0); //For without animation
return false;
});
});
please refere this, may this help
Sometimes placing scroll to body doesn't work if your current content is generated through jQuery (as it was in my case). In such situation you can just do following.
$(function() {
$('html').scrollTop(0);
});
A small issue with Subhash's jQuery solution is that you must call this code within $(document).ready() in order for your $('body') selector to work. The ready event may not fire before parts of your page have been rendered to the screen.
An better approach is to simply modify the user's location as a work-around to this browser 'feature':
//Above all of your $(document).ready(...) code
document.location = "#";
Simple HTML solution for jumping between page parts
// Place a tag like this where you would like to go
// in your case at the top
<a name="top"></a>
// you will reach there by click of this link better use an image reach their by clicking on this we can also use an image, align in right
last
Back to top button, works in all browsers.To change the scroll speed simply change the x in counter -= x here x = 10
function scrollToTop(){
var myBody = document.body;
var id = setInterval(secondFunction,1);
var height = window.pageYOffset;
var counter = height;
function secondFunction(){
if(window.pageYOffset == 0){
clearInterval(id);
}
else {
if(!!navigator.userAgent.match(/Trident/g) || !!navigator.userAgent.match(/MSIE/g)){
counter -= 10;
counter--;
document.documentElement.scrollTop = counter;
}
else {
counter -= 10;
counter--;
myBody.scrollTop = counter;
}
}
}
}
body {
height: 5000px;
margin: 0;
padding: 0;
}
.backToTop {
position: fixed;
/* Fixed at page */
top: auto;
bottom: 20px;
left: auto;
right: 20px;
background-color: crimson;
color: white;
padding: 5px;
cursor: pointer;
}
header {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: black;
}
<!-- back to top button -->
<span class="backToTop" onclick="scrollToTop()">TOP</span>
<!-- Header -->
<header>
</header>
Assign an id="#body" and tabindex in the <body> tag
<body id="#body" tabindex="1">
and use jquery focus()
$(function() {
$("#body").attr("tabindex",-1).focus();
}
You can use this method:
function gototop() {
if (window.scrollY>0) {
window.scrollTo(0,window.scrollY-20)
setTimeout("gototop()",10)
}
}