I'm using a little jQuery for a smooth scroll to anchored links. That much works, but clicking the links does not update the URL in the address bar. I want the URL to update to include the new hash of the clicked link.
I found similar questions on here, but their original code was different enough from mine that I couldn't figure out how to implement it into mine.
$('a[href^="#"]').click(function () {
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 800);
return false;
});
<html>
<body>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
p {
margin-bottom: 200px;
}
</style>
</head>
Link to Anchor 1
Link to Anchor 2
Link to Anchor 3
Link to Anchor 4
<a name="anchor1"></a>
<p>Anchor 1</p>
<a name="anchor2"></a>
<p>Anchor 2</p>
<a name="anchor3"></a>
<p>Anchor 3</p>
<a name="anchor4"></a>
<p>Anchor 4</p>
</body>
</html>
Since you have return false in your click handler, the default behavior of the link is overriden. That's why the location bar doesn't update the URL.
You can manually edit the hash part of the URL:
$('a[href^="#"]').click(function () {
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 800);
// update the URL in location bar
window.location.hash = $.attr(this, 'href').substr(1);
return false;
});
Related
I have following code and what i am trying to do is when i click the button, content of div should be displayed from the initial of div.I am not good at js.For now when i click the button then div content doesnot shows untill i scroll the page . So how could i make it scroll automatically to the top of div content when i click the button?
//HTML
<button type="button" class="btn btn-info btn-block" id="show"></button>
<div class="container-fluid" id="detail" style="display:none;"></div>
//Js
$(document).ready(function(){
$("#show").click(function(){
$("#detail").fadeIn();
});
});
Try this
$(document).ready(function() {
$("#show").click(function() {
$("#detail").fadeIn();
$('html, body').animate({
scrollTop: $("#detail").offset().top - 100
}, 800);
});
});
You can add an element above the div element.
After then, use this function in the button click event.
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
Here is the example.
https://plnkr.co/edit/kcs8UZaBcaegwTSSeThM?p=preview
You can use jQuery ScrollTo plugin.
http://api.jquery.com/scrollTop/
$('#myButton').click(function() {
//optionally remove the 500 (which is time in milliseconds) of the
//scrolling animation to remove the animation and make it instant
$.scrollTo($('#myDiv'), 500);
});
I want a simple scroll down button and it will go down to the section.
I have tried literally every damn button and jQuery and Javascript there is to do this, but it just wont happen.
It links it to the section and moves there but it all happens instant, there is no slow animation, almost like it does not recognize the Javascript or jQuery.
This is my div where the button is in.
This is the jquery i am currently using, I have it right under the button and it is between <script> tags.
var scrolled=0; $(document).ready(function(){
$("#downClick").on("click" ,function(){
scrolled=scrolled+100;
$("html, body").animate({
scrollTop: scrolled
});
});
});
body {
height: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-scroll">
<button id='downClick'>Go Down</button>
</div>
The Code Snippet works as I want it to, but in laravel it just teleports instantly to the specified section.
Can someone please tell me why it doesn't do the animation?
Try replacing: scrollTop: scrolled with scrollTop: $(document).height()
NOTE: Note the use of $(window).load (when images are loaded...which occupy height) rather than document.ready.
Ref: jQuery Scroll To bottom of the page
UPDATE: To scroll to a specific section replace scrollTop: $(document).height() To $("#my_section_to_scroll_to").offset().top
var scrolled=0; $(document).ready(function(){
$("#downClick").on("click" ,function(){
scrolled=scrolled+100;
$("html, body").animate({
scrollTop: $("#my_section_to_scroll_to").offset().top
});
});
});
body {
height: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-scroll">
<button id='downClick'>Go Down</button>
</div>
<div id="my_section_to_scroll_to" style="margin-top:300px;border:solid 1px">
my_section_to_scroll_to
</div>
You're not specifying the speed of the animation, by default it's fast, try this out :
var scrolled = 0;
$(document).ready(function() {
$("#downClick").on("click" ,function() {
// I assume scrolled is the height of the element you want to scroll to
scrolled = scrolled + 100;
$('body,html').animate({ scrollTop: scrolled }, 800);
});
});
If you want to the bottom of the document you could use this.
var scrolled=0; $(document).ready(function(){
$("#downClick").on("click" ,function(){
scrolled = $(document).height()
$("html, body").animate({
scrollTop: scrolled
});
});
});
But you could use this to get down one element height.. or div or if you use + you can scroll multiple div height!
I have a collapsible div in my project that once the user clicks on it and it expands, I need it the computer to scroll down so the user knows the text is there. The expansion of the div works but since it tries to expand automatically (before the div expands) and because this is the bottom of the page (prior to the Div opening) it will not scroll. So what I want to do is put in a 3 second delay in to my Javascript so it will not try to do that until the Div is open. I cannot get it to work. This is the code I currently have:
<script language="Javascript">
function scrollRefund() {
var divPosition = $('#refund').offset();
setTimeout(function(){
$('html, body').animate({ scrollTop: divPosition.top }, "slow");
}, 1);
}
</script>
<button type="button" class="btn-link" data-toggle="collapse" data-target="#refund" onclick="javascript: scrollRefund();">Refund Policy</button>
<div id="refund" class="collapse">
The second argument for setTimeout is in milliseconds. Try 3000 instead of 1.
<script language="Javascript">
function scrollRefund() {
var divPosition = $('#refund').offset();
setTimeout(function(){
$('html, body').animate({ scrollTop: divPosition.top }, "slow");
}, 3000);
}
</script>
<button type="button" class="btn-link" data-toggle="collapse" data-target="#refund" onclick="javascript: scrollRefund();">Refund Policy</button>
<div id="refund" class="collapse">
Try to use
setTimeout(function(){
$('html, body').animate({ scrollTop: divPosition.top }, "slow");
}, 3000);
I have this problem where my nav bar wont scroll to the specified div. I've looked at other examples but I cant seem to resolve the problem.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
</head>
<li><a id="link1" href="#top-page">Intro</a></li>
<li><a id="link2" href="#about">About</a></li>
<li><a id="link3" href="#contact">Contact</a></li>
<script>
$("#link1").click(function() {
$('html, body').animate({
scrollTop: $("#top-page").offset().top
}, 2000);
});
$("#link2").click(function() {
$('html, body').animate({
scrollTop: $("#about").offset().top
}, 2000);
});
$("#link3").click(function() {
$('html, body').animate({
scrollTop: $("#contact").offset().top
}, 2000);
});
</script>
jsfiddle -
http://jsfiddle.net/4c0r2gzv/
Thanks in advance
Here is a script for smoothscroll, which I think is what you want:
$(function(){
$(".scroll").click(function(){
$("html,body").animate({scrollTop:$("#target").offset().top},"500");return false})
});
});
Replace .scroll with a class of your own or use .scroll. Whatever class you use must be applied to the anchor which is going to be clicked. #target sets the destination. Use your own id or use #target. #target must be applied to the destination. The number is the time taken for the animation to complete in milliseconds; change it to whatever you want.
I am trying to create an anchor link that when clicked will scroll down the page.
the script:
<script type="text/javascript">
$(document).ready(function() {
function scrollWin(){
$('html,body').animate({
scrollTop: $("#scrollToHere").offset().top
}, 800);
}
});
</script>
the link:
<a class="icon_button" href="#" onclick="scrollWin();" ><i class="icon-chevron-down "></i> </a>
and then the div to be scrolled to:
<div id="scrollToHere">
Scroll to here
</div>
What am I missing?
http://jsfiddle.net/mA34T/
$('#foo').click(function () {
$('html,body').animate({
scrollTop: $("#scrollToHere").offset().top
}, 800);
});
Would that fix your issue?
try removing the '$(document).ready(function() {' wrapper
There is no need to wrap this as you're just declaring a function.