Develop Reference

jQuery scroll to section on another page

I have a website which uses jQuery to scroll between a few sections (in page1.html). Now, I added another page to the website (page2.html).
I would like the links in the header of page2.html to link back to the corresponding section in page1.html.
In page2.html I wrote:
<li>Home</li>
This links back to page1.html#splash. But on page1, the site does not scroll to the respective section.
My JavaScript is:
$(document).ready(function(){
$('a[href=\\#]').click(function(e){
e.preventDefault();
$('nav').removeClass('visible');
$('html,body').stop().animate({scrollTop: $('.'+$(this).data('scrollto')).offset().top-65 }, 700, 'easeInOutExpo', function(){});
});
What I already tried:
I attempted to add the following code, found elsewhere, to page1.html:
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
}
});
});
</script>
But there is no scrolling to the right section and the console put out the following error: index.html:19 Uncaught ReferenceError: $ is not defined
Frankly, I am stuck at this point due to lack of expertise in this field.
How do I manage that the site actually scrolls to the right section when coming from another page?

Once you have left the page, the JavaScript from the previous page can't control it. So, you'll need to use jQuery to handle it on the new page when it loads. Place this code on page1.html, changing the comment to the scroll command:
$(document).ready(function() {
if (window.location.href.includes('#splash')) {
let animationTime = 100;
$('html, body').animate({
scrollTop: $('.splash').offset().top
}, animationTime);
}
});

Uncaught ReferenceError: $ is not defined
gives this type of error when your page doesn't get the JQuery

Scrolling only horizontally is not working

I have HTML code with a table integrated with PHP Laravel. I'm getting data from Admin.php to my HTML. So the table is coming by a back-end code and is wider than the screen window. I have added a horizontal scroll bar to move it. I have added a link on back-end to move between <th> with hash href. The problem is when I click on the link, it is move to the particular <th> by scrolling horizontally as well as scrolling vertically.
Anchor tag in Admin.php:
$orderIdColumn .= '<br>Read notes >';
I added a jQuery in my HTML to prevent vertical scrolling:
$(document).ready(function()
{
$('.intro').bind('click',function(event)
{
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 100);
event.preventDefault();
});
});
Even after including this, the link is still vertically scrolling. However, after adding a static link in HTML and bind it with the above function, it is working. I guess the problem is the link is coming from back end, but not sure. How can I solve this?
This is a demo most likely what I'm trying to do. This code is working perfectly without any vertical scrolling. I don't understand why this is not working in my project.
http://jsfiddle.net/34r76ag8/21/

Just create a function in the HTML file and call it in the element in php page with onclick.
function scroll(){
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 100);
event.preventDefault();
}
in php file
$orderIdColumn .= '<br>Read notes ';

Try to inspect with the chrome developer tool to verify that information received from the back-end is correct.
you can do this by doing the following : ctrl + shift + c (to open the inspector)

scrollTop doesn't work on jQuery popup box

This is my script for scrolling.
$("#oneA").click(function() {
$('html, body').animate({
scrollTop: $("#twoA").offset().top
}, 2000);
});
and my html
<div id='oneA' style='height:100px;'></div>
<div id='twoA' style='height:100px;margin-top:300px'></div>
The above works fine as I tested on a static/normal page. But when I try the same on a popup box, it doesn't work at all. I suspect this could be library conflict between the popup and the jQuery scrolling.
I've placed these libraries
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src='../js/jquery.magnific-popup.min.js'></script>
<script src="../js/index.js"></script>
in the footer for the popup box. Without this the popup won't appear.What's the possible way to make the scrollTop work on this popup, please?

$("#oneA").click(function() {
$('#popupId').animate({
scrollTop: $("#twoA").offset().top
}, 2000);
});
In the place of, html,body I replaced with the popupbox id and it worked within popup.

How can I get all my links to scroll to the top of the page by placing one function in a coldfusion code

This is the function that I currently have.
Instead of one link I want all my links to scroll to the top of the page. The function is to be placed within a coldfusion code.
<script>
function ScrollClick() {
// Scroll to top
document.body.scrollTop = document.documentElement.scrollTop = 0;
// Open up a link in my iframe
document.getElementById('MainWindow').src="DocDisplayCategory.cfm?categoryID=89"
}
</script>
</li>

Here's how you'd do it with jQuery, in case that's an option for you:
$("body").on("click", "a", function(){
$("html, body").animate({ scrollTop: 0 }, "slow");
});
http://jsfiddle.net/sL2vA/2/
UPDATE: To help clear up confusion regarding ColdFusion, you'd simply add this to the head of your template (assuming jQuery isn't already available):
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
And put the above code wherever appropriate in your application (in the template footer, in an external JS file, whatever). Wrap it in a script tag if it's in the template.

jQuery animate speed not working? Animation instant - not smooth

Having some problems with the jQuery .animate functionality.
I have implemented a 'Back to top' link on my website here: http://www.unforgivengamers.com/
It is supposed to get you back to the top of the page once you click it.
Here is my jQuery code:
<script type="text/javascript">
jQuery.noConflict();
jQuery('a[href=#top]').click(function(){
jQuery('html, body').animate({scrollTop:0}, 'slow');
return false;
});
</script>
The problem: the animation is not smooth! I want it to scroll slowly, not instant.
Like this: http://designwoop.com/labs/smooth%20scroll/smooth-scroll.html
Am I missing something out here?
I'm using jQuery 1.8.3

You should put your code within document ready handler, the animation is not even performed on your page, the anchor is on the bottom of the page and your code without document ready on the top of the page.
jQuery(document).ready(function(){
jQuery('a[href=#top]').click(function(){
jQuery('html, body').animate({scrollTop:0}, 'slow');
return false;
});
})