How can I make the page scroll to my id
I am using the code below to make the pages croll to where I want it, but it only is triggered on page load
$('html,body').animate({
scrollTop: $(id).offset().top - 64
}, 'slow');
On the links that are clickable, only
href="page#a"
is used. This scrolls to the div but not to where I desire. Is there a way where I can also offset by 64pixels on href? Thanks
The id's css are as follows:
#a, #b {
margin-bottom: 64 px;
visibility: hidden;
position: absolute;
left: -999em;
}
var top_val = $('.test');
$('html, body').stop().animate({
scrollTop: top_val.offset().top
}, 'slow');
$(document).ready(function() {
function scroll (id) {
$(id).bind('click', function(event) {
event.preventDefault();
var $anchor = $(this).attr('href');
$('html, body').stop().animate({
scrollTop: ($anchor).offset().top - 64
}, 'slow');
});
}
scroll('#page1');
scroll('#page2');
});
<a href="" id="page1" >Visit W3Schools</a>
<a href="" id="page2" >Visit W3Schools</a>
Related
I have this code to auto scroll to a specific id.
My question is if there is the possibility of autoscroll not to an id but to a certain part of the page with pixels or percentage.
Thanks for the help.
This is the code I have
scrollTop: jQuery("#id").offset().top
}, 2000);
As per documentation of scrollTop it expects a numeric value. The same applies for the usage within animate.
So for a set pixel value just omit the function of getting the offset of an element and put in the value directly. Same goes for the percentage value but with a bit of math involved.
$(document).ready(function(){
// Add smooth scrolling to all links
$(".pixel").on('click', function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: 200 //set a numeric value to scroll a set amount of pixel
}, 800, function(){
});
});
$(".percent").on('click', function(event) {
event.preventDefault();
var windowHeight = window.innerHeight;
var percent = 90;
var percentPixel = windowHeight * (percent / 100); // calculate the amount of pixel off a percentage
$('html, body').animate({
scrollTop: percentPixel
}, 800, function(){
});
});
});
body, html, .main {
height: 100%;
}
section {
min-height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="pixel" href="#section2">Click Me to Smooth Scroll 200px</a>
<a class="percent" href="#section2">Click Me to Smooth Scroll 90%</a>
<div class="main">
<section></section>
</div>
<div class="main" id="section2">
<section style="background-color:blue"></section>
</div>
Source:https://www.w3schools.com/jquery/css_scrolltop.asp
I have this code that works fine to smoothly scroll to an anchor point on a page.
$('a[href^="#"]').click(function () {
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 800);
return false;
});
That works whenever I want to the smooth scrolling functionality. The problem I have is that I want to link to an anchor point without a smooth scroll for one particular link. How could I do that?
Add a property for the links that you want to have smooth scroll and make the condition below.
You can also make the inverse and add a property for the link that you don't want to have smooth scroll.
$('a[href^="#"]').click(function () {
if($.attr(this, 'behaviour') === "smooth") {
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 800);
} else {
$('html, body').scrollTop($('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top);
}
return false;
});
.section1 {
height: 700px;
background-color: pink;
}
.section2 {
height: 600px;
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<h1>Smooth Scroll</h1>
<div class="main section1" name="section1">
<h2>Section 1</h2>
<p>Click on the link to see the "smooth" scrolling effect.</p>
<a behaviour="smooth" href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
</div>
<div class="main section2" name="section2">
<h2>Section 2</h2>
Click Me to Scroll Instantaneously to Section 1 Above
</div>
</body>
I want my link to animate scroll horizontally across the page to the desired "id" rather then jumping to it. this is what I have so far but it doesn't seem to be working.
HTML:
<div class = option1>
<a href= #point1> ➟ </a>
</div>
<div id = point1></div>
<!-- id point is not in the "body" of the link? does that matter? -->
CSS:
body {
min-height:100%;
height:100%;
margin:0;
width:auto;
}
html {
min-height:100%;
height:100%;
overflow-y:hidden;
width:100% }
JavaScript:
$(document).ready({
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 15000);
event.preventDefault();
});
});
});
Please try use class="name" not class=name
over wise this looks similar:
Smooth scrolling when clicking an anchor link
I am pretty sure it's a very very easy question, but even after several hours of reading through Stackoverflow/Google.. still no luck.
I have a horizontal scrolling website, works great. Now i've added two buttons at the bottom of the screen (left/right).
If a visitor clicks on the 'right' button, i want the whole page to scroll to the next 'section', which is exactly $(window).width() pixels to the right.
My idea was to add so jquery that upon clicking the button ScrollLeft: $(window).width() + $(window).ScrollLeft().
Theoretically this would start with the first click scrolling rightwards exactly the width of the viewport. the 2/3/4 click it would start at the current ScrollLeft() position and once more add the viewport width.
the jquery that i use for this is the following (most likely it's somewhat bloated, jquery is not my strongsuit)
I've tried defining variables, break it down further etc. All to no avail.
$(".right a").on("click", function(event) {
event.preventDefault();
$("html, body").animate({
scrollLeft: $(window).scrollLeft() + $(window).width()
}, "slow"); //Animates the scroll
});
$(".left a").on("click", function(event) {
event.preventDefault();
$("html, body").animate({
scrollLeft: $(window).scrollLeft() - $(window).width()
}, "slow"); //Animates the scroll
});
-edit-
as requested here the HTML markup.
The articles inside #horz-wrap are actually scrolling.
<div class="sitewrap">
<div class="portfolio-wrapper">
<section id="horz-wrap">
<article class="post">
<!--section here-->
</article>
<article class="post">
<!--section here-->
</article>
</section>
</div>
<ul class="horz-nav">
<li class="left"><</li>
<li class="right">></li>
</ul>
--edit 2--
Upon request I just uploaded the page, live version: http://lauretf35.thirtyfive.axc.nl/laurens/test.html
Thanks!
Here's the change you need, you may still need some fix but this will help with scrolling.
JavaScript
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('table').animate({
scrollTop: target.offset().top - 100
}, 1000);
return false;
}
}
});
});
CSS:
table {
border-collapse: collapse;
border-spacing: 0;
position: absolute;
top: 200px;
width: 100%;
display: inline-block;
}
In this example I am trying to slideToggel a part of the footer and also scroll to the bottom of the page and change the img to up.png. How do I add those 2 added funcationality to the slideToggle.
HTML
<li id="show_footer"><a><img src="images/footer/down.png" /></a></li>
<nav id="sub">
</nav>
CSS
nav#sub {
display: none;
}
SCRIPT
$("#show_footer").click(function() {
$("#sub").slideToggle("slow");
});
Try this code,
$("#show_footer").click(function() {
$("#sub").slideToggle("slow");
$("html, body").animate({ scrollTop: $(document).height() }, "slow");
if($('#sub:visible').length > 0){
$('#show_footer > a > img').attr('src', 'new/src/file/up.png');
}else{
$('#show_footer > a > img').attr('src', 'new/src/file/down.png');
}
});
This should do the trick. Edited because smooth scroll. THIS IS NOT TESTED.