I am using a content tab with NEXT and BACK button for navigation.
The problem here is, scroll down to the bottom of the content and click on the NEXT button, it goes to next div but it stays on the bottom of the page.
How do I scroll top when I click on the NEXT/BACK button?
here is the code
$(document).ready(function(){
var current = 1;
widget = $(".step");
btnnext = $(".next");
btnback = $(".back");
btnsubmit = $(".submit");
// Init buttons and UI
widget.not(':eq(0)').hide();
hideButtons(current);
setProgress(current);
// Next button click action
btnnext.click(function(){
if(current < widget.length) {
widget.show();
widget.not(':eq('+(current++)+')').hide();
setProgress(current);
//alert("I was called from btnNext");
}
hideButtons(current);
});
// Back button click action
btnback.click(function(){
if(current > 1){
current = current - 2;
btnnext.trigger('click');
}
hideButtons(current);
});
});
// Change progress bar action
setProgress = function(currstep){
var percent = parseFloat(100 / widget.length) * currstep;
percent = percent.toFixed();
$(".progress-bar")
.css("width",percent+"%")
.html(percent+"%");
}
// Hide buttons according to the current step
hideButtons = function(current){
var limit = parseInt(widget.length);
$(".action").hide();
if(current < limit) btnnext.show();
if(current > 1) btnback.show();
if(current == limit) { btnnext.hide(); btnsubmit.show(); }
}
CODEPEN
I have checked your code, all you need to do is, just call
scrollTo({ top: 0, behavior: 'smooth' });
on both your button click and its done, check working example.
you can also use jQuery's animate() function,
like this,
$("html, body").animate({ scrollTop: 0 }, 600);
$(document).ready(function(){
var current = 1;
widget = $(".step");
btnnext = $(".next");
btnback = $(".back");
btnsubmit = $(".submit");
// Init buttons and UI
widget.not(':eq(0)').hide();
hideButtons(current);
setProgress(current);
// Next button click action
btnnext.click(function(){
if(current < widget.length) {
widget.show();
widget.not(':eq('+(current++)+')').hide();
setProgress(current);
//alert("I was called from btnNext");
}
hideButtons(current);
scrollTo({ top: 0, behavior: 'smooth' });
});
// Back button click action
btnback.click(function(){
if(current > 1){
current = current - 2;
btnnext.trigger('click');
}
hideButtons(current);
scrollTo({ top: 0, behavior: 'smooth' });
});
});
// Change progress bar action
setProgress = function(currstep){
var percent = parseFloat(100 / widget.length) * currstep;
percent = percent.toFixed();
$(".progress-bar")
.css("width",percent+"%")
.html(percent+"%");
}
// Hide buttons according to the current step
hideButtons = function(current){
var limit = parseInt(widget.length);
$(".action").hide();
if(current < limit) btnnext.show();
if(current > 1) btnback.show();
if(current == limit) { btnnext.hide(); btnsubmit.show(); }
}
.container{padding-bottom:200px !important}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="step well">Step 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque a elit et finibus. Mauris tincidunt hendrerit augue a blandit. In in ante malesuada, cursus orci vel, fringilla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc a lobortis enim. Proin nec quam et arcu venenatis malesuada. Proin et augue sit amet eros egestas posuere sed ut enim. Mauris a posuere massa. Nam pretium arcu nisl, at viverra nibh dignissim in. Quisque iaculis, diam sit amet blandit interdum, elit ante facilisis mi, in vulputate enim nisi et sapien. Vivamus eget dictum odio.
Duis efficitur sollicitudin fermentum. Morbi ac tellus ipsum. Mauris auctor elementum mauris eget tristique. Nunc varius bibendum volutpat. Aliquam eu fermentum dolor. Cras ornare et ex eu scelerisque. Aliquam non quam facilisis, viverra nunc eget, hendrerit tortor. Fusce convallis arcu sed laoreet lacinia. Aenean et libero porttitor, maximus magna et, ultrices est. Pellentesque porta lectus a semper lacinia. Maecenas elementum condimentum erat id bibendum. Pellentesque iaculis auctor justo, id aliquet turpis maximus nec.
Quisque blandit lectus dui, at fermentum urna finibus non. Phasellus id magna sit amet ligula dictum suscipit id non neque. Nam vel elit a diam mattis consectetur quis ac nulla. Fusce varius efficitur quam vitae eleifend. Proin id cursus metus. Aliquam feugiat leo massa, eu ullamcorper augue tincidunt vitae. Vivamus vehicula tellus sit amet lorem tempus, eu ultrices dui laoreet.
Donec viverra consequat ante a pretium. Vestibulum non felis molestie, rutrum tellus non, tincidunt nunc. Vivamus vel nibh sit amet sapien volutpat eleifend at vel nunc. Cras lacus est, consectetur non magna in, venenatis feugiat massa. Duis congue imperdiet imperdiet. Quisque id est vestibulum, cursus turpis at, vulputate ligula. Aenean quis purus odio. Maecenas at molestie quam, sed semper ante. Aenean ac eros condimentum, sodales ex sagittis, semper mauris. Praesent metus dui, mattis non neque in, vestibulum mollis purus. Duis condimentum tortor nec massa ullamcorper commodo. Fusce efficitur dui in hendrerit vulputate. Vivamus non nulla vitae ante lobortis dignissim sit amet non orci. Donec eleifend lacus finibus auctor ultricies. Duis scelerisque eleifend tellus nec mattis. Etiam scelerisque tellus non scelerisque cursus.</div>
<div class="step well" style="background-color: brown">Step 2
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque a elit et finibus. Mauris tincidunt hendrerit augue a blandit. In in ante malesuada, cursus orci vel, fringilla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc a lobortis enim. Proin nec quam et arcu venenatis malesuada. Proin et augue sit amet eros egestas posuere sed ut enim. Mauris a posuere massa. Nam pretium arcu nisl, at viverra nibh dignissim in. Quisque iaculis, diam sit amet blandit interdum, elit ante facilisis mi, in vulputate enim nisi et sapien. Vivamus eget dictum odio.
Duis efficitur sollicitudin fermentum. Morbi ac tellus ipsum. Mauris auctor elementum mauris eget tristique. Nunc varius bibendum volutpat. Aliquam eu fermentum dolor. Cras ornare et ex eu scelerisque. Aliquam non quam facilisis, viverra nunc eget, hendrerit tortor. Fusce convallis arcu sed laoreet lacinia. Aenean et libero porttitor, maximus magna et, ultrices est. Pellentesque porta lectus a semper lacinia. Maecenas elementum condimentum erat id bibendum. Pellentesque iaculis auctor justo, id aliquet turpis maximus nec.
Quisque blandit lectus dui, at fermentum urna finibus non. Phasellus id magna sit amet ligula dictum suscipit id non neque. Nam vel elit a diam mattis consectetur quis ac nulla. Fusce varius efficitur quam vitae eleifend. Proin id cursus metus. Aliquam feugiat leo massa, eu ullamcorper augue tincidunt vitae. Vivamus vehicula tellus sit amet lorem tempus, eu ultrices dui laoreet.
Donec viverra consequat ante a pretium. Vestibulum non felis molestie, rutrum tellus non, tincidunt nunc. Vivamus vel nibh sit amet sapien volutpat eleifend at vel nunc. Cras lacus est, consectetur non magna in, venenatis feugiat massa. Duis congue imperdiet imperdiet. Quisque id est vestibulum, cursus turpis at, vulputate ligula. Aenean quis purus odio. Maecenas at molestie quam, sed semper ante. Aenean ac eros condimentum, sodales ex sagittis, semper mauris. Praesent metus dui, mattis non neque in, vestibulum mollis purus. Duis condimentum tortor nec massa ullamcorper commodo. Fusce efficitur dui in hendrerit vulputate. Vivamus non nulla vitae ante lobortis dignissim sit amet non orci. Donec eleifend lacus finibus auctor ultricies. Duis scelerisque eleifend tellus nec mattis. Etiam scelerisque tellus non scelerisque cursus.</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque a elit et finibus. Mauris tincidunt hendrerit augue a blandit. In in ante malesuada, cursus orci vel, fringilla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc a lobortis enim. Proin nec quam et arcu venenatis malesuada. Proin et augue sit amet eros egestas posuere sed ut enim. Mauris a posuere massa. Nam pretium arcu nisl, at viverra nibh dignissim in. Quisque iaculis, diam sit amet blandit interdum, elit ante facilisis mi, in vulputate enim nisi et sapien. Vivamus eget dictum odio.
Duis efficitur sollicitudin fermentum. Morbi ac tellus ipsum. Mauris auctor elementum mauris eget tristique. Nunc varius bibendum volutpat. Aliquam eu fermentum dolor. Cras ornare et ex eu scelerisque. Aliquam non quam facilisis, viverra nunc eget, hendrerit tortor. Fusce convallis arcu sed laoreet lacinia. Aenean et libero porttitor, maximus magna et, ultrices est. Pellentesque porta lectus a semper lacinia. Maecenas elementum condimentum erat id bibendum. Pellentesque iaculis auctor justo, id aliquet turpis maximus nec.
Quisque blandit lectus dui, at fermentum urna finibus non. Phasellus id magna sit amet ligula dictum suscipit id non neque. Nam vel elit a diam mattis consectetur quis ac nulla. Fusce varius efficitur quam vitae eleifend. Proin id cursus metus. Aliquam feugiat leo massa, eu ullamcorper augue tincidunt vitae. Vivamus vehicula tellus sit amet lorem tempus, eu ultrices dui laoreet.
Donec viverra consequat ante a pretium. Vestibulum non felis molestie, rutrum tellus non, tincidunt nunc. Vivamus vel nibh sit amet sapien volutpat eleifend at vel nunc. Cras lacus est, consectetur non magna in, venenatis feugiat massa. Duis congue imperdiet imperdiet. Quisque id est vestibulum, cursus turpis at, vulputate ligula. Aenean quis purus odio. Maecenas at molestie quam, sed semper ante. Aenean ac eros condimentum, sodales ex sagittis, semper mauris. Praesent metus dui, mattis non neque in, vestibulum mollis purus. Duis condimentum tortor nec massa ullamcorper commodo. Fusce efficitur dui in hendrerit vulputate. Vivamus non nulla vitae ante lobortis dignissim sit amet non orci. Donec eleifend lacus finibus auctor ultricies. Duis scelerisque eleifend tellus nec mattis. Etiam scelerisque tellus non scelerisque cursus.</div>
<div class="step well" style="background-color: green">Step 3 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque a elit et finibus. Mauris tincidunt hendrerit augue a blandit. In in ante malesuada, cursus orci vel, fringilla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc a lobortis enim. Proin nec quam et arcu venenatis malesuada. Proin et augue sit amet eros egestas posuere sed ut enim. Mauris a posuere massa. Nam pretium arcu nisl, at viverra nibh dignissim in. Quisque iaculis, diam sit amet blandit interdum, elit ante facilisis mi, in vulputate enim nisi et sapien. Vivamus eget dictum odio.
Duis efficitur sollicitudin fermentum. Morbi ac tellus ipsum. Mauris auctor elementum mauris eget tristique. Nunc varius bibendum volutpat. Aliquam eu fermentum dolor. Cras ornare et ex eu scelerisque. Aliquam non quam facilisis, viverra nunc eget, hendrerit tortor. Fusce convallis arcu sed laoreet lacinia. Aenean et libero porttitor, maximus magna et, ultrices est. Pellentesque porta lectus a semper lacinia. Maecenas elementum condimentum erat id bibendum. Pellentesque iaculis auctor justo, id aliquet turpis maximus nec.
Quisque blandit lectus dui, at fermentum urna finibus non. Phasellus id magna sit amet ligula dictum suscipit id non neque. Nam vel elit a diam mattis consectetur quis ac nulla. Fusce varius efficitur quam vitae eleifend. Proin id cursus metus. Aliquam feugiat leo massa, eu ullamcorper augue tincidunt vitae. Vivamus vehicula tellus sit amet lorem tempus, eu ultrices dui laoreet.
Donec viverra consequat ante a pretium. Vestibulum non felis molestie, rutrum tellus non, tincidunt nunc. Vivamus vel nibh sit amet sapien volutpat eleifend at vel nunc. Cras lacus est, consectetur non magna in, venenatis feugiat massa. Duis congue imperdiet imperdiet. Quisque id est vestibulum, cursus turpis at, vulputate ligula. Aenean quis purus odio. Maecenas at molestie quam, sed semper ante. Aenean ac eros condimentum, sodales ex sagittis, semper mauris. Praesent metus dui, mattis non neque in, vestibulum mollis purus. Duis condimentum tortor nec massa ullamcorper commodo. Fusce efficitur dui in hendrerit vulputate. Vivamus non nulla vitae ante lobortis dignissim sit amet non orci. Donec eleifend lacus finibus auctor ultricies. Duis scelerisque eleifend tellus nec mattis. Etiam scelerisque tellus non scelerisque cursus.</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque a elit et finibus. Mauris tincidunt hendrerit augue a blandit. In in ante malesuada, cursus orci vel, fringilla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc a lobortis enim. Proin nec quam et arcu venenatis malesuada. Proin et augue sit amet eros egestas posuere sed ut enim. Mauris a posuere massa. Nam pretium arcu nisl, at viverra nibh dignissim in. Quisque iaculis, diam sit amet blandit interdum, elit ante facilisis mi, in vulputate enim nisi et sapien. Vivamus eget dictum odio.
Duis efficitur sollicitudin fermentum. Morbi ac tellus ipsum. Mauris auctor elementum mauris eget tristique. Nunc varius bibendum volutpat. Aliquam eu fermentum dolor. Cras ornare et ex eu scelerisque. Aliquam non quam facilisis, viverra nunc eget, hendrerit tortor. Fusce convallis arcu sed laoreet lacinia. Aenean et libero porttitor, maximus magna et, ultrices est. Pellentesque porta lectus a semper lacinia. Maecenas elementum condimentum erat id bibendum. Pellentesque iaculis auctor justo, id aliquet turpis maximus nec.</div>
<button class="action back">Back</button>
<button class="action next">Next</button>
<button class="action submit btn btn-success">Submit</button>
</div>
</div>
</div>
Related
<p onscroll="function(){alert('scroll');}"></p>
I want to catch an event when I scroll to a certain element.
I'me code in the middle of a page. When I scroll to it, alert doesn't appear. By the way, in console there is no errors.
Why does this happen, and how can I solve the problem?
onscroll event doesn't work that way.
The event is dispatched when you are actually scrolling on that specific element. If that element has no scroll bar it won't work.
For example, you have a long HTML body that you can scroll over, you have a p element inside it that has no scroll bar. And you do some scrolling. You would be doing that scrolling on the document itself and not the p element.
If you need to show an alert when an element enters your viewport you should use IntersectionObserver API
Example 1
Scrolling on the red paragraph or the white document, both of them still dispatch the document event listener.
let containerScrollCount = 0;
let textScrollCount = 0;
const alertScrollCounts = () => {
console.log(`container was scrolled ${containerScrollCount} times`);
console.log(`text was scrolled ${textScrollCount} times`);
}
document.getElementById('text').addEventListener('scroll', () => {
textScrollCount++;
alertScrollCounts();
})
document.addEventListener('scroll', () => {
containerScrollCount++;
alertScrollCounts();
})
#text {
background: red;
max-width:50%;
}
<div id="container">
<p id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquet venenatis hendrerit. Quisque id interdum sem. Etiam at iaculis augue. Mauris fermentum imperdiet velit, ut bibendum odio lacinia ut. Suspendisse sed varius velit. Quisque ultricies bibendum velit, in mattis odio venenatis sed. Ut eget eleifend nisl, vel sodales risus. Integer purus risus, finibus eget congue nec, mattis nec felis. Nullam sit amet venenatis est.
Phasellus ut pretium ante, vitae hendrerit elit. Duis ac diam et nunc rhoncus finibus. Proin dictum sed ipsum ut pellentesque. Aenean vestibulum fermentum malesuada. Nulla feugiat risus eget nisi cursus scelerisque. Vivamus ullamcorper efficitur metus in congue. Proin porttitor urna in magna varius rutrum. Maecenas dui enim, volutpat sed lorem nec, tincidunt vulputate ante. Integer tincidunt tellus sit amet lacinia tincidunt. Fusce imperdiet, urna condimentum semper sodales, ligula nulla cursus lorem, at elementum sapien dui eget elit. Donec pharetra egestas pulvinar. Nullam a nisi et nunc laoreet feugiat non ut sem. Donec efficitur diam lorem, sed ultrices quam vestibulum sit amet. Aenean tempor erat dolor, viverra efficitur augue cursus blandit. Quisque in efficitur tellus. Integer blandit aliquet ante sit amet tristique.
Vivamus at tortor at orci euismod semper ac quis lacus. Ut pharetra sit amet quam non laoreet. Integer ac blandit nunc. Suspendisse mollis sapien odio, ac convallis sapien semper non. Nunc finibus, neque vitae viverra cursus, leo turpis eleifend metus, et ornare eros ligula et orci. Vivamus rutrum et turpis at congue. Phasellus suscipit, lorem vel pharetra convallis, urna ipsum commodo orci, vitae mollis nulla tortor in dui. Nam rhoncus, arcu ut egestas suscipit, nulla lacus gravida nisl, sed porttitor dolor sem gravida lacus. Cras nulla nisl, cursus sed dictum vitae, fermentum nec tellus. Donec et nisi eget nisi elementum ultricies id non mi. Integer quam massa, porttitor ac tortor vitae, elementum eleifend odio. Morbi malesuada faucibus nisi, ac volutpat sem vestibulum eu. Donec blandit nunc non tellus pellentesque cursus a vel risus. Suspendisse quis venenatis risus, eu consectetur neque. Etiam tincidunt lectus dui, a mattis arcu scelerisque id.
Nulla vel erat at sapien rhoncus venenatis ut eget velit. Duis eu dolor porta, dapibus dui in, lacinia risus. Mauris commodo dui et eros condimentum, at feugiat dui vehicula. Nulla eu nulla viverra, laoreet mi eget, euismod nisi. Pellentesque lorem odio, consequat imperdiet sodales sit amet, tincidunt in odio. Proin in urna eget dolor blandit ullamcorper. Pellentesque non erat ante. Quisque ornare arcu id ex accumsan, sit amet suscipit lorem euismod. Nam eu turpis ultricies, luctus nisi a, facilisis justo. Vivamus ullamcorper lectus at rutrum vestibulum. Duis vehicula augue vitae imperdiet sagittis.
Mauris in posuere justo. Etiam blandit turpis non tincidunt blandit. Aenean vestibulum, lacus non dapibus egestas, leo lorem vestibulum odio, mollis fringilla felis eros sit amet nulla. Vestibulum a suscipit leo, a tempor lectus. Praesent justo enim, facilisis quis purus nec, convallis efficitur velit. Cras metus turpis, pulvinar tristique tincidunt et, consequat a neque. Vivamus vehicula id orci at tincidunt.</p>
<div>
Example 2
Scrolling on red dispatches its own listener. Why? Because it has a scroll bar.
let containerScrollCount = 0;
let textScrollCount = 0;
const alertScrollCounts = () => {
console.log(`container was scrolled ${containerScrollCount} times`);
console.log(`text was scrolled ${textScrollCount} times`);
}
document.getElementById('text').addEventListener('scroll', () => {
textScrollCount++;
alertScrollCounts();
})
document.addEventListener('scroll', () => {
containerScrollCount++;
alertScrollCounts();
})
#text {
background: red;
max-width:50%;
max-height:300px;
overflow-y:auto;
}
<div id="container">
<p id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquet venenatis hendrerit. Quisque id interdum sem. Etiam at iaculis augue. Mauris fermentum imperdiet velit, ut bibendum odio lacinia ut. Suspendisse sed varius velit. Quisque ultricies bibendum velit, in mattis odio venenatis sed. Ut eget eleifend nisl, vel sodales risus. Integer purus risus, finibus eget congue nec, mattis nec felis. Nullam sit amet venenatis est.
Phasellus ut pretium ante, vitae hendrerit elit. Duis ac diam et nunc rhoncus finibus. Proin dictum sed ipsum ut pellentesque. Aenean vestibulum fermentum malesuada. Nulla feugiat risus eget nisi cursus scelerisque. Vivamus ullamcorper efficitur metus in congue. Proin porttitor urna in magna varius rutrum. Maecenas dui enim, volutpat sed lorem nec, tincidunt vulputate ante. Integer tincidunt tellus sit amet lacinia tincidunt. Fusce imperdiet, urna condimentum semper sodales, ligula nulla cursus lorem, at elementum sapien dui eget elit. Donec pharetra egestas pulvinar. Nullam a nisi et nunc laoreet feugiat non ut sem. Donec efficitur diam lorem, sed ultrices quam vestibulum sit amet. Aenean tempor erat dolor, viverra efficitur augue cursus blandit. Quisque in efficitur tellus. Integer blandit aliquet ante sit amet tristique.
Vivamus at tortor at orci euismod semper ac quis lacus. Ut pharetra sit amet quam non laoreet. Integer ac blandit nunc. Suspendisse mollis sapien odio, ac convallis sapien semper non. Nunc finibus, neque vitae viverra cursus, leo turpis eleifend metus, et ornare eros ligula et orci. Vivamus rutrum et turpis at congue. Phasellus suscipit, lorem vel pharetra convallis, urna ipsum commodo orci, vitae mollis nulla tortor in dui. Nam rhoncus, arcu ut egestas suscipit, nulla lacus gravida nisl, sed porttitor dolor sem gravida lacus. Cras nulla nisl, cursus sed dictum vitae, fermentum nec tellus. Donec et nisi eget nisi elementum ultricies id non mi. Integer quam massa, porttitor ac tortor vitae, elementum eleifend odio. Morbi malesuada faucibus nisi, ac volutpat sem vestibulum eu. Donec blandit nunc non tellus pellentesque cursus a vel risus. Suspendisse quis venenatis risus, eu consectetur neque. Etiam tincidunt lectus dui, a mattis arcu scelerisque id.
Nulla vel erat at sapien rhoncus venenatis ut eget velit. Duis eu dolor porta, dapibus dui in, lacinia risus. Mauris commodo dui et eros condimentum, at feugiat dui vehicula. Nulla eu nulla viverra, laoreet mi eget, euismod nisi. Pellentesque lorem odio, consequat imperdiet sodales sit amet, tincidunt in odio. Proin in urna eget dolor blandit ullamcorper. Pellentesque non erat ante. Quisque ornare arcu id ex accumsan, sit amet suscipit lorem euismod. Nam eu turpis ultricies, luctus nisi a, facilisis justo. Vivamus ullamcorper lectus at rutrum vestibulum. Duis vehicula augue vitae imperdiet sagittis.
Mauris in posuere justo. Etiam blandit turpis non tincidunt blandit. Aenean vestibulum, lacus non dapibus egestas, leo lorem vestibulum odio, mollis fringilla felis eros sit amet nulla. Vestibulum a suscipit leo, a tempor lectus. Praesent justo enim, facilisis quis purus nec, convallis efficitur velit. Cras metus turpis, pulvinar tristique tincidunt et, consequat a neque. Vivamus vehicula id orci at tincidunt.</p>
<div>
I'm extending functionality based on ajax loader like this
cats loader and this mia loader
I can't seem to smash a bug if I have pages using anchors like
Contacto
Ajax pages load like this, with (kind of because retrieves from json) target page on data-
//<a data-mia="home" href="/home">Home</a>
if ( el.getAttribute('data-mia') in pages ){
el.addEventListener('click', clickHandler, true);
The scroll stops in the middle instead going fully to bottom. I believe because popstate is fired.
I can have the fwd and back buttons functionality and broke hashtags or viceversa but I'm unable to do both. Can't we do that by 2020?
This some things I tried, commented out:
// Revert to a previously saved state
window.addEventListener('popstate', function(event) {
console.log('popstate fired!');
//console.log(history.state);
// if prevents hashes/anchor scroll navigation in same url bugging
// var w = window.location+"";
// if (!w.lastIndexOf('#') > 0)
updateContent(event.state);
});
Adding this I also tried but seems not the way or I'm missing how to combine with the correct previous:
window.addEventListener('hashchange', function() {
console.log('The hash has changed!');
event.preventDefault();
// nasty hack #footer for contact link.
// if (window.location.lastIndexOf('#footer') > 0)
document.querySelector('#footer').scrollIntoView();
}, false);
Right now with these 2 like that, anchors and ajax load works, but fwd/back are bugged when #hashes involved. Like this:
Navigate: /page1 /2 /2#footer /3
Back: /3 /2#footer (not going to anchor) /2 (goes here to anchor) ...
I'd prefer not to resort to onclick event like
<a onclick"js:goto('footer')" href="#footer">Contacto</a>
Following a full snippet example.
var pages = [];
var home_title = $(document).attr('title');
var home_meta_desc = $('meta[name="description"]').attr('content');
pages = {
"1": {
"title": "title 1 ",
"meta_desc": "meta 1",
"file": "1 file"
},
"2": {
"title": "title 12 ",
"meta_desc": "meta 12",
"file": "12 file"
},
"3": {
"title": "title 3 ",
"meta_desc": "meta 3",
"file": "3 file"
},
"4": {
"title": "title 4 ",
"meta_desc": "meta 4",
"file": "4 file"
}
};
els = document.querySelectorAll('[data-mia]');
els.forEach(function(el) {
if (el.getAttribute('data-mia') in pages) {
el.addEventListener('click', clickHandler, true);
}
});
function updateContent(data) {
document.querySelector('#one').scrollIntoView();
//$( "#one" ).fadeOut(); //
$("#one > .inner").hide();
console.log("updating content", data);
if (data == null) {
console.log('home content triggered updt content');
$(document).prop('title', home_title);
$("meta[name='description']").attr("content", home_meta_desc);
$('#one').text(data.file); //$( "#one > .inner" ).fadeIn(100).load( "blog/home.html " );
return;
}
$(document).prop('title', data.title);
$("meta[name='description']").attr("content", data.meta_desc);
$('#one').text(data.file); //$("#one > .inner").fadeIn(300).load("blog/" + data.file + ".html");
}
// Load some mock JSON data into the page
function clickHandler(event) {
var cat = event.target.getAttribute('href').split('/').pop(),
data = pages[cat]; // || null; // In reality this could be an AJAX request
console.log("clickHandler data:", data);
updateContent(data);
// Add an item to the history log
history.pushState(data, event.target.textContent, event.target.href);
return event.preventDefault();
}
// Revert to a previously saved state
window.addEventListener('popstate', function(event) {
console.log('popstate fired!');
//console.log(history.state);
// if prevents hashes/anchor scroll navigation in same url bugging
// var w = window.location+"";
// if (!w.lastIndexOf('#') > 0)
updateContent(event.state);
});
window.addEventListener('hashchange', function() {
console.log('The hash has changed!');
event.preventDefault();
// nasty hack #footer for contact link.
// if (window.location.lastIndexOf('#footer') > 0)
document.querySelector('#footer').scrollIntoView();
}, false);
// Store the initial content so we can revisit it later
//console.log("hist pre", history.state);
history.replaceState(null, document.title, document.location.href);
//console.log("hist post ", history.state);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="nav">
<a data-mia="1" href="/1">Home</a>
<a data-mia="2" href="/2">Manual</a>
<a data-mia="3" href="/3">Not only 3</a>
<a data-mia="4" href="/4">Fotos</a>
Contacto
<!-- onclick="document.querySelector('#footer').scrollIntoView({ behavior: 'smooth' })" -->
</nav>
<section id="one">
<div class="inner">
server load content['body'];
</div>
</section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sollicitudin nunc vel libero malesuada semper. Praesent porttitor tincidunt finibus. Morbi elementum massa vitae quam eleifend, eget dignissim diam tempus. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Morbi non iaculis nunc. Cras ac sollicitudin erat, nec pharetra ipsum. Proin in condimentum est, eget ullamcorper orci. Cras accumsan ante leo, et sodales orci tempor sed. Pellentesque feugiat ac
urna quis rhoncus. Pellentesque convallis lorem libero, et tincidunt nibh varius ac. Maecenas magna urna, mattis at aliquam semper, hendrerit sed libero. Sed feugiat risus mi, ut tempor justo sodales in. Duis justo diam, viverra eu sodales nec, accumsan
non ex. Fusce sed suscipit sem. Donec a nibh suscipit, blandit felis vitae, consectetur metus. Maecenas faucibus odio id vulputate accumsan. Fusce porta non enim vel rutrum. Vestibulum ullamcorper fermentum eleifend. Proin ullamcorper placerat purus sed
tempor. Suspendisse suscipit suscipit urna quis placerat. Maecenas at justo pulvinar, varius nunc non, dictum justo. Curabitur in mollis tortor, at consequat ante. Duis commodo tellus neque, id molestie dui pellentesque ut. Quisque nec felis quis nulla
sollicitudin finibus. Fusce mattis mauris quis est pulvinar, sed interdum nisl pharetra. Morbi dictum, mi vitae viverra rhoncus, nibh ex varius magna, vel tincidunt erat odio ultrices tellus. Maecenas feugiat nibh quis lectus sodales, vel fringilla nulla
tincidunt. Phasellus condimentum rhoncus feugiat. Nam vel condimentum purus, et venenatis odio. Nam nisl tortor, faucibus in egestas vel, lacinia quis massa. Curabitur vel consectetur leo. Mauris sed imperdiet nunc. Nam enim eros, accumsan sit amet pulvinar
id, bibendum sit amet neque. Ut magna nulla, lobortis in imperdiet et, sagittis at enim. Etiam malesuada eu felis id consectetur. Nulla libero eros, fringilla ac consectetur non, efficitur a massa. Praesent ornare, ex id vulputate suscipit, dolor neque
eleifend magna, a posuere tellus justo sollicitudin massa. Pellentesque at mollis magna, at dapibus orci. Suspendisse sagittis libero quis augue accumsan euismod ut a arcu. Nulla sit amet nulla at augue imperdiet rhoncus id a mi. Morbi eu elementum augue,
eget luctus ex. Vivamus neque neque, tristique at bibendum et, posuere vel ligula. Vestibulum nec scelerisque erat, at fermentum massa. Donec et nulla rhoncus, ullamcorper enim vitae, convallis odio. Etiam consequat mauris leo, gravida consequat ex porta
vel. Mauris sed dignissim risus. Sed risus tellus, ullamcorper eu neque quis, rhoncus pulvinar massa. Suspendisse arcu tellus, varius sed luctus vel, viverra vel ex. Nullam ac mi eros. Proin ac volutpat orci, quis ornare augue. Donec a ultrices nunc.
Curabitur at aliquet augue. Aenean pharetra placerat sem. Donec blandit euismod ipsum, a cursus lorem fringilla ut. Nulla sed feugiat metus. Nam mollis, massa vel viverra lobortis, odio purus convallis mauris, ac accumsan sem turpis eu urna. Aliquam vel
lacus non dolor tempus lacinia in eget ante. Phasellus congue erat eu interdum luctus. Sed non sapien finibus, porta augue quis, luctus sapien. Praesent euismod porta nisi, nec volutpat metus hendrerit sed. Aenean gravida sed sem in consequat. Donec non
nisi euismod, fermentum nibh bibendum, pellentesque lorem. Vestibulum at placerat nulla. Ut sodales nulla at tincidunt blandit. Nulla non elit non nisl aliquet luctus. Nam lacinia justo ac ipsum finibus, non pellentesque ante hendrerit. Duis auctor auctor
tincidunt. Morbi porta odio id arcu tristique, vel finibus felis tristique. Nulla maximus ullamcorper augue, ut efficitur enim sagittis at. Fusce vitae lorem mi. Maecenas ultrices nisl et nibh feugiat vehicula. Ut dignissim placerat arcu, pellentesque
varius tortor. Quisque egestas massa dui. Vestibulum finibus interdum est, a porttitor diam scelerisque at. Donec egestas dui sed orci consectetur, quis tincidunt dolor lobortis. Duis mollis leo sed velit varius, ut laoreet turpis accumsan. Sed ac neque
eu nisl porta eleifend. In turpis urna, dignissim at convallis vel, luctus nec lectus. Nullam in mi laoreet, euismod urna ut, sagittis libero. Nam iaculis, metus vehicula tempus cursus, arcu turpis imperdiet orci, id posuere nulla mi vel dui. Aenean tempus
sit amet ligula vel ultricies. Quisque ac tortor bibendum sapien consectetur blandit in at felis. Vivamus consectetur velit tincidunt, eleifend augue vel, gravida quam. In at sodales purus. Aenean pulvinar sapien at ante viverra scelerisque. Duis nulla
diam, efficitur sit amet enim a, ornare tempus libero. Maecenas vitae lacinia ipsum. Nunc elementum mollis consequat. Duis dapibus vehicula purus, ac rhoncus diam interdum et. Quisque lacinia sit amet elit non ornare. Ut at tellus aliquam, sodales dui
sed, placerat leo. Aliquam erat volutpat. Nunc interdum egestas lacus sit amet eleifend. Donec ultrices, diam vitae imperdiet dignissim, metus purus accumsan quam, eget vehicula lorem diam rhoncus magna. Vestibulum ante libero, aliquet fringilla pretium
at, ultricies sed massa. Pellentesque vulputate ut nisl a egestas. Aliquam faucibus est et ligula ultrices, vitae tempor enim fringilla. Sed nunc nulla, lobortis in leo eu, sollicitudin vestibulum eros. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Donec a erat vel lacus porttitor euismod rhoncus sit amet diam. Suspendisse pharetra dui quis tempor commodo. Cras tristique, ligula non venenatis sagittis, sapien justo consectetur nisi, ac suscipit sem turpis in nisi.
Maecenas leo lacus, lobortis a suscipit at, fermentum sit amet lacus. Nam mattis, augue vitae consectetur dapibus, leo lacus consequat mi, at placerat tellus orci sed nisi. Donec imperdiet vehicula metus vel venenatis. Sed finibus a tellus eu laoreet.
Mauris mattis magna tellus, quis lobortis lacus facilisis eget. Sed eu luctus ante, a porttitor est. Nunc et lobortis lacus. Duis eu volutpat lectus, et convallis nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Phasellus condimentum auctor tortor, id molestie libero tincidunt sed. Duis vitae felis sit amet tellus malesuada gravida congue in mauris. Mauris rutrum placerat tincidunt. Suspendisse cursus pharetra finibus. Nulla laoreet turpis ac ante luctus, vitae
luctus turpis pharetra. Duis a congue ligula. Cras commodo urna sit amet ante maximus iaculis. Duis sollicitudin lobortis faucibus. Etiam mauris sem, blandit at finibus eu, congue sed felis. Vivamus aliquam massa eget turpis fermentum ornare. Sed lobortis
aliquet est, eget fermentum lorem sagittis at. Suspendisse dui risus, interdum eu massa vel, fermentum iaculis mi. Nullam sed quam ut quam pretium mattis. Donec vel ornare nisi. Morbi dapibus arcu id gravida ultrices. Donec ullamcorper metus id ex volutpat
porta. Donec sollicitudin ante pharetra orci rutrum hendrerit pellentesque vel nibh. Nulla pharetra imperdiet mi, non fringilla neque interdum in. Nam fermentum augue vitae facilisis feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Nunc imperdiet mi eget quam tristique aliquam. Phasellus vel semper nibh, in imperdiet justo. Maecenas efficitur pretium erat, quis fringilla magna malesuada ac. Etiam pretium cursus vulputate. Sed sit amet euismod ante. Aliquam
interdum nulla sit amet lacus gravida, ac malesuada libero ullamcorper. Ut volutpat enim a elit pharetra, sit amet efficitur dui porttitor. Nam erat orci, elementum eu fermentum nec, tempor id odio. Morbi id imperdiet leo, sit amet ultrices diam. Maecenas
sed accumsan tortor, ut sollicitudin neque. Nulla mi nunc, egestas in ex at, cursus finibus ligula. Sed bibendum porttitor lectus a ornare. Pellentesque augue tellus, rhoncus sed molestie a, hendrerit et dolor. Donec malesuada pretium libero et cursus.
Nunc tristique molestie orci, vitae lacinia augue. Maecenas molestie porttitor dui nec blandit. Pellentesque et pulvinar diam, eget vehicula neque. In quis ligula sit amet nisl condimentum ornare sit amet eu purus. Donec et commodo augue, nec volutpat
nisi. Nulla ullamcorper et libero id viverra. Aliquam lobortis, libero sit amet maximus faucibus, sapien nisi imperdiet enim, quis fermentum nulla velit eu ipsum. Sed non urna at quam imperdiet rutrum sed in leo. Curabitur at lectus condimentum, maximus
augue at, bibendum tellus. Nulla varius eros facilisis, pretium ante at, dignissim urna. Ut in malesuada diam. Fusce a nulla lacinia, tincidunt dolor vitae, luctus eros. Cras consequat a purus quis elementum. Quisque finibus fermentum cursus. Vestibulum
bibendum, purus id vestibulum pulvinar, nulla ante ullamcorper nisl, vitae dictum dolor ipsum in neque. Sed arcu massa, aliquet lacinia magna ac, aliquet finibus ex. Nam imperdiet dignissim turpis at laoreet. Proin nisl felis, varius sed facilisis ac,
maximus sit amet ante. Ut accumsan erat id iaculis condimentum. Curabitur consectetur ultricies lorem vel dignissim. Sed rutrum ante felis, vel venenatis massa pulvinar at. Sed consectetur sed erat vitae accumsan. Maecenas malesuada neque a lorem fringilla,
sed elementum quam posuere. Sed interdum tempus nulla at cursus. In non tristique est. Nulla bibendum purus lorem, non consequat nibh feugiat sit amet. Mauris ultrices enim eros, eu ornare est molestie molestie. Duis in ipsum ut augue rutrum semper volutpat
ultrices nulla. Phasellus gravida tempus nisi eu luctus. Cras volutpat, massa eu facilisis accumsan, dui turpis ullamcorper ligula, eget porta lectus purus id odio. Duis nulla felis, dictum ac nisl ut, aliquet cursus urna. Curabitur metus mi, iaculis
nec sapien in, aliquet dapibus metus. Nunc a risus semper orci ultrices venenatis facilisis eu mi. Mauris sodales aliquet neque eu tempor. Nulla in nisl lacinia, ultricies arcu placerat, tincidunt nunc. Quisque rutrum, urna id dictum tincidunt, purus
neque aliquam ex, nec accumsan ante metus et risus. Quisque facilisis, nisi viverra accumsan dignissim, orci urna fringilla turpis, quis tempor lorem arcu vel risus. Ut sit amet finibus tellus, vel congue nunc. Etiam sit amet bibendum nisl. Aliquam nec
rutrum purus. Sed eget nunc eget justo venenatis accumsan. Fusce vel est semper, rutrum orci ac, ullamcorper orci. Donec in ornare urna. Sed sollicitudin maximus ante, eget finibus lacus pharetra sed. Ut interdum, nulla ultricies euismod mollis, tortor
lorem accumsan ex, sit amet pharetra ante urna id libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean facilisis non purus at pulvinar. Fusce consectetur vestibulum purus. Ut finibus justo pretium,
dictum sapien nec, tincidunt eros. Nunc a sagittis nulla. Ut ac rhoncus libero. Aliquam egestas laoreet felis in volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ex nibh. Donec ac diam eget leo venenatis porta. Vivamus nisl
dolor, dictum eu justo vel, luctus euismod erat. Nunc imperdiet odio id turpis auctor scelerisque.
<hr>
<section id="footer">
<br>
<div class="inner">
I'm a foot I'm a foot I'm a foot I'm a foot I'm a foot I'm a foot I'm a foot I'm a foot
<br> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean facilisis non purus at pulvinar. Fusce consectetur vestibulum purus. Ut finibus justo pretium, dictum sapien nec, tincidunt eros. Nunc a sagittis
nulla. Ut ac rhoncus libero. Aliquam egestas laoreet felis in volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ex nibh. Donec ac diam eget leo venenatis porta. Vivamus nisl dolor, dictum eu justo vel, luctus euismod erat.
Nunc imperdiet odio id turpis auctor scelerisque.
<hr> I'm a foot I'm a foot I'm a foot I'm a foot I'm a foot I'm a foot I'm a foot I'm a foot
</div>
</section>
I noticed that for all your links you execute the below code.
els = document.querySelectorAll('[data-mia]');
els.forEach(function(el) {
if (el.getAttribute('data-mia') in pages) {
el.addEventListener('click', clickHandler, true);
}
});
The clickHandler updates the history, hence when you navigate back the history contains the previous entries. But on the click of #footer the history is not updated, possibly this could be the reason for the issue you are facing.
Updating my answer.
I see you have used document.querySelector('#one').scrollIntoView(); assuming this is for scrolling to the top of page.
I suggest you use
// This prevents the page from scrolling to the previous position.
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
// scrolled to the top
window.scrollTo(0,0);
Use this for the IE/Edge
var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
var isEdge = /Edge/.test(navigator.userAgent);
if(isIE11 || isEdge) {
setTimeout(function(){ window.scrollTo(0, 0); }, 300);
// you need to scroll up once the page is loaded, you may need to change the timeout
}
with this, you would need to change the below listener as well.
window.addEventListener('hashchange', function() {
console.log('The hash has changed!');
//event.preventDefault();
// nasty hack #footer for contact link.
if (window.location.hash ==='#footer')
document.querySelector('#footer').scrollIntoView();
}, false);
This will prevent the listner from scrolling to the footer when "#footer" not in the location.
Hope this helps.
When using ui-router for angularjs, I can't get hash-id linking working as expected. If the URL already has the hash I want to jump to in it (ie whatever.com/#/route1#des1) and I click an anchor tag with a link to #des1, then the link will not work and the page will not scroll down to the div with that id. You can easily cause this with the plunker below by clicking a link, scrolling back to the top, and then clicking the same link.
Please see the plunker with the issue: https://plnkr.co/edit/b8MJ2b37z0nYG0qbsy29?p=preview
Is there a way to allow ui-router to jump to a id that it has just been to? Is this just an issue with ui-router? It doesn't seem to exist when ui-router is not used (see http://plnkr.co/edit/iz1SseMqLISlWZ6fOSKC?p=preview).
<a ui-sref="route1({'#': 'des1'})">Jump to P1</a>
<br>
<a ui-sref="route1({'#': 'des2'})">Jump to P2</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="des1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare vulputate nisl eget sagittis. Sed dapibus leo sed ultricies viverra. Maecenas aliquet euismod nibh in elementum. Sed eu augue eget odio luctus lacinia ac non augue. Nunc luctus iaculis tellus sit amet vestibulum. Nunc at purus felis. Cras felis tellus, consequat at tellus eget, pretium efficitur quam. Curabitur sapien nunc, lobortis a metus ut, vehicula aliquet nisi.
Aliquam pellentesque eu turpis in interdum. Nulla porttitor urna magna, a aliquam justo lobortis dignissim. Donec tincidunt, magna vel interdum bibendum, velit sem vulputate ipsum, iaculis volutpat est arcu id orci. Nulla venenatis ipsum non interdum pharetra. Nullam mattis, orci at pretium suscipit, lacus lacus sagittis dui, sit amet sollicitudin sem ipsum non enim. Aenean pulvinar leo risus, vel imperdiet nulla eleifend et. Duis vel neque sagittis, dapibus arcu et, interdum arcu. Proin at molestie elit. Vivamus aliquam porta urna et tincidunt. Integer eu odio risus. Suspendisse ornare magna ac erat maximus, quis faucibus lectus eleifend. Aliquam pellentesque sagittis lacus sed tempor. Praesent aliquet tellus non nunc euismod varius. Donec pharetra cursus nunc, nec commodo erat malesuada nec. Nam ac facilisis lorem, eget vestibulum mauris. Nam nunc odio, tempor at condimentum et, pellentesque vitae erat.
Donec mollis dolor fringilla sapien condimentum, non ultrices tortor blandit. Aenean vel massa ipsum. Ut leo nisl, vehicula nec mi elementum, varius lacinia risus. Vestibulum metus nibh, hendrerit non velit sit amet, posuere hendrerit nunc. Aenean ut felis in nisi convallis interdum. Vestibulum posuere, nulla vitae bibendum elementum, dui metus auctor ante, et ullamcorper leo turpis quis tellus. Phasellus condimentum tellus quis posuere tempus. Fusce faucibus laoreet turpis a hendrerit. Phasellus tempor consectetur urna. In dictum turpis et ligula dictum, nec placerat mi elementum. Sed interdum, eros ut finibus elementum, elit quam auctor dui, et maximus orci justo commodo tortor. Maecenas eu efficitur massa.
Vivamus at eros vel magna facilisis lacinia quis vel est. Vivamus et quam ligula. Vestibulum hendrerit scelerisque enim, eu dapibus dui pulvinar a. Vestibulum mollis tortor sit amet tempor pharetra. Nullam facilisis leo sit amet justo auctor porttitor. Nunc laoreet pellentesque orci, sed ultrices tortor viverra eget. Integer ornare pellentesque suscipit. Mauris euismod leo dui, sit amet finibus tortor fermentum vel. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque efficitur tortor erat, at eleifend libero feugiat in. Pellentesque vitae ullamcorper nulla. Quisque ullamcorper facilisis turpis. Nullam blandit, mi sed pulvinar dignissim, lorem dui mattis justo, eget molestie risus enim a lorem. Aenean efficitur turpis id sem ornare, nec sagittis massa fermentum.
Nam iaculis augue vel leo volutpat mattis. Etiam et imperdiet dui. Cras egestas elementum porttitor. Aliquam neque purus, feugiat in risus in, cursus gravida quam. Donec rutrum neque massa, quis feugiat urna dignissim et. Aenean sit amet maximus dui, et aliquam ligula. Suspendisse mollis feugiat ex, eget consequat massa posuere sit amet. Donec sagittis, lacus eget imperdiet facilisis, libero leo consequat lorem, sed interdum quam nisi a metus. Proin ante mi, porttitor eget commodo eu, sollicitudin ac neque. Quisque auctor metus sed iaculis tempor. Sed pellentesque ligula interdum elit tincidunt elementum nec id velit. Nullam faucibus eu eros nec congue. Etiam hendrerit neque in velit mattis, eget scelerisque libero fringilla. Nulla facilisi. Suspendisse blandit ligula sed commodo vehicula. Etiam pellentesque ex vitae porta maximus.
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="des2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare vulputate nisl eget sagittis. Sed dapibus leo sed ultricies viverra. Maecenas aliquet euismod nibh in elementum. Sed eu augue eget odio luctus lacinia ac non augue. Nunc luctus iaculis tellus sit amet vestibulum. Nunc at purus felis. Cras felis tellus, consequat at tellus eget, pretium efficitur quam. Curabitur sapien nunc, lobortis a metus ut, vehicula aliquet nisi.
Aliquam pellentesque eu turpis in interdum. Nulla porttitor urna magna, a aliquam justo lobortis dignissim. Donec tincidunt, magna vel interdum bibendum, velit sem vulputate ipsum, iaculis volutpat est arcu id orci. Nulla venenatis ipsum non interdum pharetra. Nullam mattis, orci at pretium suscipit, lacus lacus sagittis dui, sit amet sollicitudin sem ipsum non enim. Aenean pulvinar leo risus, vel imperdiet nulla eleifend et. Duis vel neque sagittis, dapibus arcu et, interdum arcu. Proin at molestie elit. Vivamus aliquam porta urna et tincidunt. Integer eu odio risus. Suspendisse ornare magna ac erat maximus, quis faucibus lectus eleifend. Aliquam pellentesque sagittis lacus sed tempor. Praesent aliquet tellus non nunc euismod varius. Donec pharetra cursus nunc, nec commodo erat malesuada nec. Nam ac facilisis lorem, eget vestibulum mauris. Nam nunc odio, tempor at condimentum et, pellentesque vitae erat.
Donec mollis dolor fringilla sapien condimentum, non ultrices tortor blandit. Aenean vel massa ipsum. Ut leo nisl, vehicula nec mi elementum, varius lacinia risus. Vestibulum metus nibh, hendrerit non velit sit amet, posuere hendrerit nunc. Aenean ut felis in nisi convallis interdum. Vestibulum posuere, nulla vitae bibendum elementum, dui metus auctor ante, et ullamcorper leo turpis quis tellus. Phasellus condimentum tellus quis posuere tempus. Fusce faucibus laoreet turpis a hendrerit. Phasellus tempor consectetur urna. In dictum turpis et ligula dictum, nec placerat mi elementum. Sed interdum, eros ut finibus elementum, elit quam auctor dui, et maximus orci justo commodo tortor. Maecenas eu efficitur massa.
Vivamus at eros vel magna facilisis lacinia quis vel est. Vivamus et quam ligula. Vestibulum hendrerit scelerisque enim, eu dapibus dui pulvinar a. Vestibulum mollis tortor sit amet tempor pharetra. Nullam facilisis leo sit amet justo auctor porttitor. Nunc laoreet pellentesque orci, sed ultrices tortor viverra eget. Integer ornare pellentesque suscipit. Mauris euismod leo dui, sit amet finibus tortor fermentum vel. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque efficitur tortor erat, at eleifend libero feugiat in. Pellentesque vitae ullamcorper nulla. Quisque ullamcorper facilisis turpis. Nullam blandit, mi sed pulvinar dignissim, lorem dui mattis justo, eget molestie risus enim a lorem. Aenean efficitur turpis id sem ornare, nec sagittis massa fermentum.
Nam iaculis augue vel leo volutpat mattis. Etiam et imperdiet dui. Cras egestas elementum porttitor. Aliquam neque purus, feugiat in risus in, cursus gravida quam. Donec rutrum neque massa, quis feugiat urna dignissim et. Aenean sit amet maximus dui, et aliquam ligula. Suspendisse mollis feugiat ex, eget consequat massa posuere sit amet. Donec sagittis, lacus eget imperdiet facilisis, libero leo consequat lorem, sed interdum quam nisi a metus. Proin ante mi, porttitor eget commodo eu, sollicitudin ac neque. Quisque auctor metus sed iaculis tempor. Sed pellentesque ligula interdum elit tincidunt elementum nec id velit. Nullam faucibus eu eros nec congue. Etiam hendrerit neque in velit mattis, eget scelerisque libero fringilla. Nulla facilisi. Suspendisse blandit ligula sed commodo vehicula. Etiam pellentesque ex vitae porta maximus.
</div>
Sorry for the poorly formatted code
Angular recognizes #-prefixed paths as Angular paths (by default).If you want to be able to scroll to element using anchors, you can setup a function in your controller that uses $location's hash() method to set the hash.
.controller('appCtrl', function ($location, $scope) {
$scope.scrollTo = function (hash) {
$location.hash(hash);
};
})
Then in your HTML
Jump to P1
<br>
Jump to P2
I tried focusing to
an element
the caret
but I couldn't
Here is what I tried
http://jsfiddle.net/vXnCM/7779/
expected behavior: the view should scroll to the top after clicking on focus button at the very bottom.
function setCaret() {
var el = document.getElementById("editable");
var range = document.createRange();
var sel = window.getSelection();
range.setStart(el.childNodes[2], 5);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
el.focus();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editable" contenteditable="true">
text text text<br>text text text<br>text text text<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra lectus a arcu accumsan, ut varius nulla porta. In hac habitasse platea dictumst. Maecenas vel convallis eros. Phasellus aliquet leo non iaculis efficitur. Nunc placerat quis nulla et dignissim. Nulla porta vestibulum lorem, at euismod enim sodales in. Proin eleifend neque arcu, maximus iaculis orci convallis non. Maecenas ac aliquam felis. Etiam aliquet, lacus a consectetur auctor, ligula urna vulputate tellus, sed egestas nibh eros id elit. Nulla molestie orci lacus, ac ultricies mi feugiat ut. Fusce eleifend commodo velit sit amet convallis. Quisque at laoreet libero. Quisque eu ultricies magna. Maecenas bibendum porttitor nibh. Sed sit amet pulvinar lacus. Curabitur rutrum mattis arcu in mattis.
Morbi mattis ante neque, et egestas nunc eleifend et. Proin placerat accumsan ultricies. Integer at vehicula felis. Suspendisse posuere tortor a elit consequat auctor. Pellentesque turpis magna, rutrum vitae rutrum quis, fermentum quis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam purus augue, tempus in nisi sit amet, pulvinar consectetur arcu.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat venenatis ante, eu finibus magna posuere quis. Etiam id leo eu justo molestie consectetur vitae vel eros. Mauris maximus vel eros sit amet pellentesque. Nulla maximus id mi eget sodales. Quisque luctus metus vel turpis bibendum, a maximus sem placerat. Nullam nec tortor nec purus pretium volutpat a eget mauris. Donec volutpat ac sapien eget maximus. Duis placerat iaculis dolor eu efficitur. Proin sem metus, posuere et egestas non, consectetur ut purus. Cras metus felis, placerat id lacinia vitae, pharetra et urna. Sed volutpat elit est, id tempor turpis hendrerit et. Cras erat augue, lacinia gravida lorem quis, iaculis rhoncus ante. Mauris aliquam fringilla neque, at tempus turpis auctor vitae.
Ut ornare malesuada semper. Aenean a quam sagittis, vulputate erat vitae, tempor urna. Aenean dignissim eros non sodales tristique. Fusce hendrerit a metus nec vehicula. Fusce maximus nisi ut urna convallis varius. Nulla ornare finibus nisi. Nulla sagittis semper nisl, nec venenatis lorem dignissim in. Nunc pretium semper ultrices. Curabitur eros urna, lacinia pharetra eros at, dapibus fermentum libero. Vestibulum vel arcu quis magna vestibulum tempor. Praesent pulvinar ligula nisi, non consequat lectus placerat in.
Nam maximus, eros at lobortis ullamcorper, ipsum nulla tempor neque, et accumsan ante diam eget mi. Donec porttitor nisl vel sapien mattis scelerisque. Nullam mollis, ex nec congue feugiat, quam urna lobortis sapien, at rhoncus metus lacus vel augue. Etiam eu vehicula ipsum. Etiam eu blandit neque. Quisque erat magna, tincidunt sit amet aliquet at, dictum at libero. Phasellus facilisis sodales magna, iaculis congue ex aliquet vitae. Aliquam sed lacus in metus dictum ornare. Morbi elementum eros malesuada varius efficitur. Maecenas neque nunc, consequat ac tristique a, pharetra vitae erat. Phasellus mattis lectus sit amet ante malesuada facilisis. Sed malesuada id lectus eget tristique. Vivamus vitae leo in lectus posuere egestas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra lectus a arcu accumsan, ut varius nulla porta. In hac habitasse platea dictumst. Maecenas vel convallis eros. Phasellus aliquet leo non iaculis efficitur. Nunc placerat quis nulla et dignissim. Nulla porta vestibulum lorem, at euismod enim sodales in. Proin eleifend neque arcu, maximus iaculis orci convallis non. Maecenas ac aliquam felis. Etiam aliquet, lacus a consectetur auctor, ligula urna vulputate tellus, sed egestas nibh eros id elit. Nulla molestie orci lacus, ac ultricies mi feugiat ut. Fusce eleifend commodo velit sit amet convallis. Quisque at laoreet libero. Quisque eu ultricies magna. Maecenas bibendum porttitor nibh. Sed sit amet pulvinar lacus. Curabitur rutrum mattis arcu in mattis.
Morbi mattis ante neque, et egestas nunc eleifend et. Proin placerat accumsan ultricies. Integer at vehicula felis. Suspendisse posuere tortor a elit consequat auctor. Pellentesque turpis magna, rutrum vitae rutrum quis, fermentum quis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam purus augue, tempus in nisi sit amet, pulvinar consectetur arcu.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat venenatis ante, eu finibus magna posuere quis. Etiam id leo eu justo molestie consectetur vitae vel eros. Mauris maximus vel eros sit amet pellentesque. Nulla maximus id mi eget sodales. Quisque luctus metus vel turpis bibendum, a maximus sem placerat. Nullam nec tortor nec purus pretium volutpat a eget mauris. Donec volutpat ac sapien eget maximus. Duis placerat iaculis dolor eu efficitur. Proin sem metus, posuere et egestas non, consectetur ut purus. Cras metus felis, placerat id lacinia vitae, pharetra et urna. Sed volutpat elit est, id tempor turpis hendrerit et. Cras erat augue, lacinia gravida lorem quis, iaculis rhoncus ante. Mauris aliquam fringilla neque, at tempus turpis auctor vitae.
Ut ornare malesuada semper. Aenean a quam sagittis, vulputate erat vitae, tempor urna. Aenean dignissim eros non sodales tristique. Fusce hendrerit a metus nec vehicula. Fusce maximus nisi ut urna convallis varius. Nulla ornare finibus nisi. Nulla sagittis semper nisl, nec venenatis lorem dignissim in. Nunc pretium semper ultrices. Curabitur eros urna, lacinia pharetra eros at, dapibus fermentum libero. Vestibulum vel arcu quis magna vestibulum tempor. Praesent pulvinar ligula nisi, non consequat lectus placerat in.
Nam maximus, eros at lobortis ullamcorper, ipsum nulla tempor neque, et accumsan ante diam eget mi. Donec porttitor nisl vel sapien mattis scelerisque. Nullam mollis, ex nec congue feugiat, quam urna lobortis sapien, at rhoncus metus lacus vel augue. Etiam eu vehicula ipsum. Etiam eu blandit neque. Quisque erat magna, tincidunt sit amet aliquet at, dictum at libero. Phasellus facilisis sodales magna, iaculis congue ex aliquet vitae. Aliquam sed lacus in metus dictum ornare. Morbi elementum eros malesuada varius efficitur. Maecenas neque nunc, consequat ac tristique a, pharetra vitae erat. Phasellus mattis lectus sit amet ante malesuada facilisis. Sed malesuada id lectus eget tristique. Vivamus vitae leo in lectus posuere egestas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra lectus a arcu accumsan, ut varius nulla porta. In hac habitasse platea dictumst. Maecenas vel convallis eros. Phasellus aliquet leo non iaculis efficitur. Nunc placerat quis nulla et dignissim. Nulla porta vestibulum lorem, at euismod enim sodales in. Proin eleifend neque arcu, maximus iaculis orci convallis non. Maecenas ac aliquam felis. Etiam aliquet, lacus a consectetur auctor, ligula urna vulputate tellus, sed egestas nibh eros id elit. Nulla molestie orci lacus, ac ultricies mi feugiat ut. Fusce eleifend commodo velit sit amet convallis. Quisque at laoreet libero. Quisque eu ultricies magna. Maecenas bibendum porttitor nibh. Sed sit amet pulvinar lacus. Curabitur rutrum mattis arcu in mattis.
Morbi mattis ante neque, et egestas nunc eleifend et. Proin placerat accumsan ultricies. Integer at vehicula felis. Suspendisse posuere tortor a elit consequat auctor. Pellentesque turpis magna, rutrum vitae rutrum quis, fermentum quis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam purus augue, tempus in nisi sit amet, pulvinar consectetur arcu.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat venenatis ante, eu finibus magna posuere quis. Etiam id leo eu justo molestie consectetur vitae vel eros. Mauris maximus vel eros sit amet pellentesque. Nulla maximus id mi eget sodales. Quisque luctus metus vel turpis bibendum, a maximus sem placerat. Nullam nec tortor nec purus pretium volutpat a eget mauris. Donec volutpat ac sapien eget maximus. Duis placerat iaculis dolor eu efficitur. Proin sem metus, posuere et egestas non, consectetur ut purus. Cras metus felis, placerat id lacinia vitae, pharetra et urna. Sed volutpat elit est, id tempor turpis hendrerit et. Cras erat augue, lacinia gravida lorem quis, iaculis rhoncus ante. Mauris aliquam fringilla neque, at tempus turpis auctor vitae.
Ut ornare malesuada semper. Aenean a quam sagittis, vulputate erat vitae, tempor urna. Aenean dignissim eros non sodales tristique. Fusce hendrerit a metus nec vehicula. Fusce maximus nisi ut urna convallis varius. Nulla ornare finibus nisi. Nulla sagittis semper nisl, nec venenatis lorem dignissim in. Nunc pretium semper ultrices. Curabitur eros urna, lacinia pharetra eros at, dapibus fermentum libero. Vestibulum vel arcu quis magna vestibulum tempor. Praesent pulvinar ligula nisi, non consequat lectus placerat in.
Nam maximus, eros at lobortis ullamcorper, ipsum nulla tempor neque, et accumsan ante diam eget mi. Donec porttitor nisl vel sapien mattis scelerisque. Nullam mollis, ex nec congue feugiat, quam urna lobortis sapien, at rhoncus metus lacus vel augue. Etiam eu vehicula ipsum. Etiam eu blandit neque. Quisque erat magna, tincidunt sit amet aliquet at, dictum at libero. Phasellus facilisis sodales magna, iaculis congue ex aliquet vitae. Aliquam sed lacus in metus dictum ornare. Morbi elementum eros malesuada varius efficitur. Maecenas neque nunc, consequat ac tristique a, pharetra vitae erat. Phasellus mattis lectus sit amet ante malesuada facilisis. Sed malesuada id lectus eget tristique. Vivamus vitae leo in lectus posuere egestas.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra lectus a arcu accumsan, ut varius nulla porta. In hac habitasse platea dictumst. Maecenas vel convallis eros. Phasellus aliquet leo non iaculis efficitur. Nunc placerat quis nulla et dignissim. Nulla porta vestibulum lorem, at euismod enim sodales in. Proin eleifend neque arcu, maximus iaculis orci convallis non. Maecenas ac aliquam felis. Etiam aliquet, lacus a consectetur auctor, ligula urna vulputate tellus, sed egestas nibh eros id elit. Nulla molestie orci lacus, ac ultricies mi feugiat ut. Fusce eleifend commodo velit sit amet convallis. Quisque at laoreet libero. Quisque eu ultricies magna. Maecenas bibendum porttitor nibh. Sed sit amet pulvinar lacus. Curabitur rutrum mattis arcu in mattis.
Morbi mattis ante neque, et egestas nunc eleifend et. Proin placerat accumsan ultricies. Integer at vehicula felis. Suspendisse posuere tortor a elit consequat auctor. Pellentesque turpis magna, rutrum vitae rutrum quis, fermentum quis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam purus augue, tempus in nisi sit amet, pulvinar consectetur arcu.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat venenatis ante, eu finibus magna posuere quis. Etiam id leo eu justo molestie consectetur vitae vel eros. Mauris maximus vel eros sit amet pellentesque. Nulla maximus id mi eget sodales. Quisque luctus metus vel turpis bibendum, a maximus sem placerat. Nullam nec tortor nec purus pretium volutpat a eget mauris. Donec volutpat ac sapien eget maximus. Duis placerat iaculis dolor eu efficitur. Proin sem metus, posuere et egestas non, consectetur ut purus. Cras metus felis, placerat id lacinia vitae, pharetra et urna. Sed volutpat elit est, id tempor turpis hendrerit et. Cras erat augue, lacinia gravida lorem quis, iaculis rhoncus ante. Mauris aliquam fringilla neque, at tempus turpis auctor vitae.
Ut ornare malesuada semper. Aenean a quam sagittis, vulputate erat vitae, tempor urna. Aenean dignissim eros non sodales tristique. Fusce hendrerit a metus nec vehicula. Fusce maximus nisi ut urna convallis varius. Nulla ornare finibus nisi. Nulla sagittis semper nisl, nec venenatis lorem dignissim in. Nunc pretium semper ultrices. Curabitur eros urna, lacinia pharetra eros at, dapibus fermentum libero. Vestibulum vel arcu quis magna vestibulum tempor. Praesent pulvinar ligula nisi, non consequat lectus placerat in.
Nam maximus, eros at lobortis ullamcorper, ipsum nulla tempor neque, et accumsan ante diam eget mi. Donec porttitor nisl vel sapien mattis scelerisque. Nullam mollis, ex nec congue feugiat, quam urna lobortis sapien, at rhoncus metus lacus vel augue. Etiam eu vehicula ipsum. Etiam eu blandit neque. Quisque erat magna, tincidunt sit amet aliquet at, dictum at libero. Phasellus facilisis sodales magna, iaculis congue ex aliquet vitae. Aliquam sed lacus in metus dictum ornare. Morbi elementum eros malesuada varius efficitur. Maecenas neque nunc, consequat ac tristique a, pharetra vitae erat. Phasellus mattis lectus sit amet ante malesuada facilisis. Sed malesuada id lectus eget tristique. Vivamus vitae leo in lectus posuere egestas.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra lectus a arcu accumsan, ut varius nulla porta. In hac habitasse platea dictumst. Maecenas vel convallis eros. Phasellus aliquet leo non iaculis efficitur. Nunc placerat quis nulla et dignissim. Nulla porta vestibulum lorem, at euismod enim sodales in. Proin eleifend neque arcu, maximus iaculis orci convallis non. Maecenas ac aliquam felis. Etiam aliquet, lacus a consectetur auctor, ligula urna vulputate tellus, sed egestas nibh eros id elit. Nulla molestie orci lacus, ac ultricies mi feugiat ut. Fusce eleifend commodo velit sit amet convallis. Quisque at laoreet libero. Quisque eu ultricies magna. Maecenas bibendum porttitor nibh. Sed sit amet pulvinar lacus. Curabitur rutrum mattis arcu in mattis.
Morbi mattis ante neque, et egestas nunc eleifend et. Proin placerat accumsan ultricies. Integer at vehicula felis. Suspendisse posuere tortor a elit consequat auctor. Pellentesque turpis magna, rutrum vitae rutrum quis, fermentum quis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam purus augue, tempus in nisi sit amet, pulvinar consectetur arcu.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat venenatis ante, eu finibus magna posuere quis. Etiam id leo eu justo molestie consectetur vitae vel eros. Mauris maximus vel eros sit amet pellentesque. Nulla maximus id mi eget sodales. Quisque luctus metus vel turpis bibendum, a maximus sem placerat. Nullam nec tortor nec purus pretium volutpat a eget mauris. Donec volutpat ac sapien eget maximus. Duis placerat iaculis dolor eu efficitur. Proin sem metus, posuere et egestas non, consectetur ut purus. Cras metus felis, placerat id lacinia vitae, pharetra et urna. Sed volutpat elit est, id tempor turpis hendrerit et. Cras erat augue, lacinia gravida lorem quis, iaculis rhoncus ante. Mauris aliquam fringilla neque, at tempus turpis auctor vitae.
Ut ornare malesuada semper. Aenean a quam sagittis, vulputate erat vitae, tempor urna. Aenean dignissim eros non sodales tristique. Fusce hendrerit a metus nec vehicula. Fusce maximus nisi ut urna convallis varius. Nulla ornare finibus nisi. Nulla sagittis semper nisl, nec venenatis lorem dignissim in. Nunc pretium semper ultrices. Curabitur eros urna, lacinia pharetra eros at, dapibus fermentum libero. Vestibulum vel arcu quis magna vestibulum tempor. Praesent pulvinar ligula nisi, non consequat lectus placerat in.
Nam maximus, eros at lobortis ullamcorper, ipsum nulla tempor neque, et accumsan ante diam eget mi. Donec porttitor nisl vel sapien mattis scelerisque. Nullam mollis, ex nec congue feugiat, quam urna lobortis sapien, at rhoncus metus lacus vel augue. Etiam eu vehicula ipsum. Etiam eu blandit neque. Quisque erat magna, tincidunt sit amet aliquet at, dictum at libero. Phasellus facilisis sodales magna, iaculis congue ex aliquet vitae. Aliquam sed lacus in metus dictum ornare. Morbi elementum eros malesuada varius efficitur. Maecenas neque nunc, consequat ac tristique a, pharetra vitae erat. Phasellus mattis lectus sit amet ante malesuada facilisis. Sed malesuada id lectus eget tristique. Vivamus vitae leo in lectus posuere egestas.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra lectus a arcu accumsan, ut varius nulla porta. In hac habitasse platea dictumst. Maecenas vel convallis eros. Phasellus aliquet leo non iaculis efficitur. Nunc placerat quis nulla et dignissim. Nulla porta vestibulum lorem, at euismod enim sodales in. Proin eleifend neque arcu, maximus iaculis orci convallis non. Maecenas ac aliquam felis. Etiam aliquet, lacus a consectetur auctor, ligula urna vulputate tellus, sed egestas nibh eros id elit. Nulla molestie orci lacus, ac ultricies mi feugiat ut. Fusce eleifend commodo velit sit amet convallis. Quisque at laoreet libero. Quisque eu ultricies magna. Maecenas bibendum porttitor nibh. Sed sit amet pulvinar lacus. Curabitur rutrum mattis arcu in mattis.
Morbi mattis ante neque, et egestas nunc eleifend et. Proin placerat accumsan ultricies. Integer at vehicula felis. Suspendisse posuere tortor a elit consequat auctor. Pellentesque turpis magna, rutrum vitae rutrum quis, fermentum quis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam purus augue, tempus in nisi sit amet, pulvinar consectetur arcu.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat venenatis ante, eu finibus magna posuere quis. Etiam id leo eu justo molestie consectetur vitae vel eros. Mauris maximus vel eros sit amet pellentesque. Nulla maximus id mi eget sodales. Quisque luctus metus vel turpis bibendum, a maximus sem placerat. Nullam nec tortor nec purus pretium volutpat a eget mauris. Donec volutpat ac sapien eget maximus. Duis placerat iaculis dolor eu efficitur. Proin sem metus, posuere et egestas non, consectetur ut purus. Cras metus felis, placerat id lacinia vitae, pharetra et urna. Sed volutpat elit est, id tempor turpis hendrerit et. Cras erat augue, lacinia gravida lorem quis, iaculis rhoncus ante. Mauris aliquam fringilla neque, at tempus turpis auctor vitae.
<span id="#test_mark" class="test_mark">do not like</span>
Ut ornare malesuada semper. Aenean a quam sagittis, vulputate erat vitae, tempor urna. Aenean dignissim eros non sodales tristique. Fusce hendrerit a metus nec vehicula. Fusce maximus nisi ut urna convallis varius. Nulla ornare finibus nisi. Nulla sagittis semper nisl, nec venenatis lorem dignissim in. Nunc pretium semper ultrices. Curabitur eros urna, lacinia pharetra eros at, dapibus fermentum libero. Vestibulum vel arcu quis magna vestibulum tempor. Praesent pulvinar ligula nisi, non consequat lectus placerat in.
Nam maximus, eros at lobortis ullamcorper, ipsum nulla tempor neque, et accumsan ante diam eget mi. Donec porttitor nisl vel sapien mattis scelerisque. Nullam mollis, ex nec congue feugiat, quam urna lobortis sapien, at rhoncus metus lacus vel augue. Etiam eu vehicula ipsum. Etiam eu blandit neque. Quisque erat magna, tincidunt sit amet aliquet at, dictum at libero. Phasellus facilisis sodales magna, iaculis congue ex aliquet vitae. Aliquam sed lacus in metus dictum ornare. Morbi elementum eros malesuada varius efficitur. Maecenas neque nunc, consequat ac tristique a, pharetra vitae erat. Phasellus mattis lectus sit amet ante malesuada facilisis. Sed malesuada id lectus eget tristique. Vivamus vitae leo in lectus posuere egestas.
</div>
<button id="button" onclick="setCaret()">focus</button>
You may wrap the document.getElementById("button").focus(); in a document.ready function. And also should call the el.focus(); before the dom manipulations.
JSFIDDLE
Hope this helps.
Currently working on a section where there are three rows of content. An image, a title, and some text. When the section hits the top of the window, there's an additional div that becomes fixed 50px from the top of the window and scrolls as the user scrolls.
When the div hits 30px from the bottom of the section, its position is then switched to absolute.
It seems that this is mostly js issue so I'll leave the JS here for review. Ideally I'd like to get away from using a fixed number like I'm currently using so if anyone has any suggestions on how to maybe get away from that or like I mentioned, position the div absolute when 30px from the bottom of the section, regardless of the height.
var stickyTop = $('.scroller_anchor').offset().top;
$(window).on( 'scroll', function(){
if ($(window).scrollTop() >= stickyTop) {
$('.depositionx-contact').addClass('scrolling');
$('.map-anchor').addClass('scrolling');
if ($(window).scrollTop() > 2990) {
$('.depositionx-contact').addClass('unstick');
} else {
$('.depositionx-contact').removeClass('unstick');
}
} else {
$('.depositionx-contact').removeClass('scrolling');
$('.map-anchor').removeClass('scrolling');
}
});
I've attached a pen for the sake of a more visual example.
https://codepen.io/crawbuck/pen/wpeRWW
Any input would be greatly appreciated.
Sorry for the delay. I slapped together a working sample. You can see the fiddle here.
The gist of it is to only scroll the element when it falls in a range of the parent container offset to the parent container height - the height of the element.
function SemiFixElement($container, $element) {
$container = $($container);
$container.width($container.width());
$container.height($container.height());
$container.css('position', 'absolute');
$container.css('left', '0');
$element = $($element);
$element.css('position', 'relative');
$(window).on('scroll', function(ev) {
let top = -$container[0].getBoundingClientRect().top;
top = Math.max(0, top);
top = Math.min(top, $container.height() - $element.height());
$element.css('top', top);
});
}
SemiFixElement('.semi-fixed-container', '.semi-fixed');
.column-layout {
display: flex;
justify-content: flex-end;
}
.column-layout > .semi-fixed-container {
background: LightBlue;
width: 100px;
}
.column-layout > div {
background: LightGreen;
max-width: calc(100% - 100px);
}
ul {
list-style-type: none;
margin-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan lacus libero, vitae finibus elit pretium a. In sit amet neque non urna convallis rutrum a nec dolor. Duis feugiat, odio vel vulputate pretium, orci massa sollicitudin lacus, sed eleifend
mauris augue sed sem. Morbi imperdiet venenatis sollicitudin. Vestibulum ut ipsum sit amet enim mattis sollicitudin. Donec enim nulla, efficitur a scelerisque fringilla, ornare quis mauris. Mauris iaculis odio ut quam tincidunt imperdiet. Nam quam dui,
iaculis nec neque vitae, dapibus accumsan magna. Sed sollicitudin urna sagittis turpis porta, a sagittis diam feugiat. Praesent auctor sodales velit, in vestibulum nisl posuere id. Aenean dapibus felis sit amet mauris commodo, at posuere sem imperdiet.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean et lorem felis.
</p>
<p>
Fusce rhoncus tristique justo, at ultricies urna lobortis non. Ut mollis, lorem dictum egestas rutrum, dolor erat commodo lacus, sit amet consequat mi massa ac tortor. Nulla tristique euismod odio ut pharetra. Morbi accumsan iaculis lectus, eget suscipit
lacus hendrerit vel. Phasellus elit elit, congue quis lacinia ullamcorper, vulputate et diam. Etiam eu eleifend nunc. Suspendisse nibh mauris, vestibulum id purus vitae, tristique semper nisi. Donec mollis mauris ex, faucibus porta turpis consequat
eget. Proin volutpat quis mauris ut dictum. Nullam ut gravida odio. Praesent finibus turpis non dapibus convallis. Nunc condimentum urna luctus dui sodales malesuada. Vestibulum iaculis consequat sodales. Maecenas ac elit vitae leo luctus mollis. Proin
condimentum dapibus augue et tristique.
</p>
<p>
Pellentesque nec bibendum est, non molestie lacus. Curabitur at magna sapien. Ut suscipit imperdiet finibus. Nam in massa eget felis efficitur finibus. Mauris venenatis placerat elit, a placerat tortor venenatis vitae. Duis et nisl ut augue laoreet dignissim
ut a arcu. Maecenas eu fermentum nisl. Morbi vestibulum leo eu lacus interdum, in tincidunt lacus malesuada. Mauris nec cursus erat, a fermentum magna. Donec bibendum libero et leo ultrices venenatis. Donec eget metus sodales, dapibus ante quis, dictum
mi. Vestibulum orci quam, malesuada ac venenatis vitae, finibus in massa.
</p>
<p>
Aliquam aliquet massa sit amet ipsum porttitor, nec malesuada massa sodales. Phasellus placerat massa et nisl scelerisque, nec egestas leo accumsan. Pellentesque et tempor leo. Suspendisse sit amet iaculis mauris. In sed orci sollicitudin, vestibulum
est sit amet, lobortis tellus. Nunc sit amet hendrerit nibh. Integer dictum nibh at elit euismod, tincidunt sollicitudin libero mollis. Morbi placerat felis sem, a vulputate augue faucibus sed. Morbi bibendum feugiat ornare. Integer id fringilla felis.
Nulla eget est ut tellus iaculis laoreet. Proin eu aliquam nisl, eu consequat eros. Vivamus finibus ligula vel feugiat volutpat.
</p>
<div>
<div class="column-layout">
<div class="semi-fixed-container">
<div class="semi-fixed">
<ul>
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
<li><a>Link 3</a></li>
<li><a>Link 4</a></li>
<li><a>Link 5</a></li>
</ul>
</div>
</div>
<div>
<p>
Donec et tristique libero. Suspendisse sit amet nunc ante. Sed id aliquet nibh. Praesent sodales ante ullamcorper mauris pellentesque, eu lobortis ipsum accumsan. Nam eget justo nec mi sollicitudin maximus. Phasellus ac lacinia sapien. Sed sed volutpat
velit. In in justo vel odio pellentesque imperdiet at nec augue. Aenean vel pulvinar nisl. Suspendisse efficitur in diam quis vestibulum. Cras egestas metus eget mi lobortis, eu tincidunt augue lobortis. Donec sed enim venenatis, eleifend lacus
in, rutrum enim. Aenean ut est sed leo dapibus auctor.
</p>
<p>
Pellentesque gravida tincidunt faucibus. Nunc in elit sit amet velit efficitur imperdiet ut ac arcu. Vivamus eget nisl in dui accumsan tincidunt hendrerit vitae nisl. Etiam placerat quis elit ut tincidunt. Praesent ipsum metus, vestibulum et odio lacinia,
volutpat maximus est. Donec facilisis aliquam felis at ultricies. Quisque enim lorem, euismod et sapien sit amet, consequat vehicula leo. Nam commodo massa neque, et porttitor urna egestas ut. Vivamus condimentum neque eu mi elementum tincidunt.
Aliquam porta condimentum metus quis maximus. Nunc ornare arcu rhoncus metus sodales fringilla. Morbi elementum est sit amet pellentesque consequat. Quisque sem enim, lobortis a augue nec, fringilla dictum ex. Duis efficitur consectetur ultricies.
</p>
<p>
Aenean eget justo id mi condimentum cursus. Sed molestie erat nec mauris ultricies, sed porttitor nisl fermentum. Curabitur quis luctus metus. Quisque scelerisque consectetur eros consectetur bibendum. Cras quis aliquet quam. Donec ac nunc finibus, pulvinar
libero eu, tincidunt libero. Morbi et commodo mi. Nam ut massa sit amet nulla tristique porta a id dui. Nunc cursus porttitor finibus. Nunc dictum, enim ornare fermentum maximus, eros urna fermentum risus, eu rutrum est turpis sollicitudin ipsum.
Curabitur id urna in lacus dictum commodo nec a urna. Ut quis aliquet mauris. Praesent commodo consectetur consequat. Nulla porttitor nec ante id placerat.
</p>
<p>
Aliquam condimentum purus vel justo congue, vitae iaculis turpis pretium. Suspendisse venenatis purus sed porttitor pellentesque. In nulla nulla, pulvinar vitae maximus in, tincidunt non erat. Donec pharetra commodo semper. Suspendisse potenti. Mauris
metus mauris, venenatis in quam vel, mattis commodo velit. Vivamus in pretium enim, vitae condimentum enim. Nulla dictum, turpis eu porttitor convallis, metus ipsum porttitor urna, eu rhoncus metus dolor vel enim. Nunc vulputate mattis tellus.
In eu tempor ex. Sed quam elit, elementum a ultricies in, efficitur ac nulla. Morbi vel aliquet neque. Quisque sagittis tempor purus, eu lacinia velit gravida nec.
</p>
<p>
Nulla congue luctus mauris at convallis. Sed tortor tortor, faucibus vitae elementum a, mattis in mi. Aenean tellus odio, sagittis vitae finibus eu, finibus eu dui. Duis mattis sollicitudin ante ornare bibendum. Nulla a sapien pellentesque, rhoncus urna
eu, iaculis nunc. Suspendisse pellentesque urna ut nibh hendrerit volutpat. Sed lacinia vehicula luctus. Sed nec ligula eu neque varius ultricies. Sed imperdiet metus et eros sodales auctor. Aenean erat sem, laoreet at placerat nec, feugiat at
nulla. Nulla eu magna mauris. Aenean condimentum tortor velit, et lacinia purus luctus et.
</p>
<p>
Duis in nibh vitae ex elementum malesuada. Aliquam tempus, ligula ac fringilla congue, nibh leo egestas est, ac bibendum tellus nisi sed ex. Donec lobortis suscipit lectus, quis luctus magna aliquam imperdiet. Proin tellus ipsum, tempus eget velit a,
bibendum egestas enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. In convallis convallis nulla eget faucibus. Duis laoreet est in faucibus lacinia. Pellentesque mi nisl, elementum sit amet egestas ac, dapibus in elit. Vestibulum
pulvinar quam arcu. Proin molestie nunc vitae ante varius rutrum.
</p>
</div>
</div>
</div>
<p>
Fusce rhoncus tristique justo, at ultricies urna lobortis non. Ut mollis, lorem dictum egestas rutrum, dolor erat commodo lacus, sit amet consequat mi massa ac tortor. Nulla tristique euismod odio ut pharetra. Morbi accumsan iaculis lectus, eget suscipit
lacus hendrerit vel. Phasellus elit elit, congue quis lacinia ullamcorper, vulputate et diam. Etiam eu eleifend nunc. Suspendisse nibh mauris, vestibulum id purus vitae, tristique semper nisi. Donec mollis mauris ex, faucibus porta turpis consequat
eget. Proin volutpat quis mauris ut dictum. Nullam ut gravida odio. Praesent finibus turpis non dapibus convallis. Nunc condimentum urna luctus dui sodales malesuada. Vestibulum iaculis consequat sodales. Maecenas ac elit vitae leo luctus mollis. Proin
condimentum dapibus augue et tristique.
</p>
<p>
Pellentesque nec bibendum est, non molestie lacus. Curabitur at magna sapien. Ut suscipit imperdiet finibus. Nam in massa eget felis efficitur finibus. Mauris venenatis placerat elit, a placerat tortor venenatis vitae. Duis et nisl ut augue laoreet dignissim
ut a arcu. Maecenas eu fermentum nisl. Morbi vestibulum leo eu lacus interdum, in tincidunt lacus malesuada. Mauris nec cursus erat, a fermentum magna. Donec bibendum libero et leo ultrices venenatis. Donec eget metus sodales, dapibus ante quis, dictum
mi. Vestibulum orci quam, malesuada ac venenatis vitae, finibus in massa.
</p>
<p>
Fusce rhoncus tristique justo, at ultricies urna lobortis non. Ut mollis, lorem dictum egestas rutrum, dolor erat commodo lacus, sit amet consequat mi massa ac tortor. Nulla tristique euismod odio ut pharetra. Morbi accumsan iaculis lectus, eget suscipit
lacus hendrerit vel. Phasellus elit elit, congue quis lacinia ullamcorper, vulputate et diam. Etiam eu eleifend nunc. Suspendisse nibh mauris, vestibulum id purus vitae, tristique semper nisi. Donec mollis mauris ex, faucibus porta turpis consequat
eget. Proin volutpat quis mauris ut dictum. Nullam ut gravida odio. Praesent finibus turpis non dapibus convallis. Nunc condimentum urna luctus dui sodales malesuada. Vestibulum iaculis consequat sodales. Maecenas ac elit vitae leo luctus mollis. Proin
condimentum dapibus augue et tristique.
</p>
<p>
Pellentesque nec bibendum est, non molestie lacus. Curabitur at magna sapien. Ut suscipit imperdiet finibus. Nam in massa eget felis efficitur finibus. Mauris venenatis placerat elit, a placerat tortor venenatis vitae. Duis et nisl ut augue laoreet dignissim
ut a arcu. Maecenas eu fermentum nisl. Morbi vestibulum leo eu lacus interdum, in tincidunt lacus malesuada. Mauris nec cursus erat, a fermentum magna. Donec bibendum libero et leo ultrices venenatis. Donec eget metus sodales, dapibus ante quis, dictum
mi. Vestibulum orci quam, malesuada ac venenatis vitae, finibus in massa.
</p>