Apologies if this has already been asked, but I couldn't find a specific solution.
I am using a set uneditable plugin on my website which uses pages. I cannot edit the code for the plugin. The paged content is towards the bottom of the page that it is displayed on: see here
When the user clicks on the pages, it adds "page/2/" etc to the end of the current URL, but it shows the user the top of the page.
I have added an anchor just before the plugin, but how can I scroll the user to the anchor based on if the URL contains "page/2/" or "page/3/" etc.?
Simply: If the URL contains the word "page", then scroll to #anchor
Thanks!
Got it working, thanks #hangindev
<script type="text/javascript">
if(window.location.href.indexOf("page") > -1) {
(function($) {
$(document).ready(function() {
$('html, body').animate({
'scrollTop': $('#anchor').offset().top
}, 1000);
});
})(jQuery);
}
</script>
Maybe this helps
Bottom
<h1 id="bottom">This is the bottom! </h1>
Related
I have a working "go to top" button in my forum. I have chosen to go with the following code because it does not change my forum's URL in any way, which is important. Within the head section:
<script>
function scrollWindow() {
var top = document.getElementById('goHere').scrollTop;
window.scrollTo(0, top);
}
</script>
The div within the body I want to go to:
<div id="goHere"></div>
The input:
<input type="image" onclick="scrollWindow()" value="Scroll" class="goTop" src="http://example.com/images/26.png" alt="" />
It functions well and leaves my URL clean. My questions:
Can my JavaScript be edited to allow smooth scrolling to the div ID (and if so, would you please help me with the edits)?
Must I link to an external jQuery file in order to achieve this?
So making it as simple as possible, here it is using JQuery, see fiddle http://jsfiddle.net/aq9ptz0L/2/
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#goHere").offset().top
}, 2000);
});
Note in your <head> section add this if you dont already have JQuery:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
Add this script instead of your script and working fiddle here Link
!function(e,t){"use strict";"function"==typeof define&&define.amd?define(t):"object"==typeof exports&&"object"==typeof module?module.exports=t():e.smoothScroll=t()}(this,function(){"use strict";if("object"==typeof window&&void 0!==document.querySelectorAll&&void 0!==window.pageYOffset&&void 0!==history.pushState){var e=function(e){return"HTML"===e.nodeName?-window.pageYOffset:e.getBoundingClientRect().top+window.pageYOffset},t=function(e){return.5>e?4*e*e*e:(e-1)*(2*e-2)*(2*e-2)+1},n=function(e,n,o,i){return o>i?n:e+(n-e)*t(o/i)},o=function(t,o,i,r){o=o||500,r=r||window;var u=window.pageYOffset;if("number"==typeof t)var a=parseInt(t);else var a=e(t);var d=Date.now(),f=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(e){window.setTimeout(e,15)},s=function(){var e=Date.now()-d;r!==window?r.scrollTop=n(u,a,e,o):window.scroll(0,n(u,a,e,o)),e>o?"function"==typeof i&&i(t):f(s)};s()},i=function(e){e.preventDefault(),location.hash!==this.hash&&window.history.pushState(null,null,this.hash),o(document.getElementById(this.hash.substring(1)),500,function(e){location.replace("#"+e.id)})};return document.addEventListener("DOMContentLoaded",function(){for(var e,t=document.querySelectorAll('a[href^="#"]:not([href="#"])'),n=t.length;e=t[--n];)e.addEventListener("click",i,!1)}),o}});
function scrollWindow() {
var top = document.getElementById('goHere');
window.smoothScroll(top)
}
</script>
I'm using a jQuery tabs plugin that uses anchors so that you can define which tab should be open by default.
But if the interface is below the fold, it doesn't scroll into view. I tried adding an anchor tag above the interface, but I can't get it to highlight the appropriate tab AND scroll into view.
Since I can't use two anchors, my thought was if I wanted to provide a link to scroll into view I could include a parameter in the URL, like this:
http://stage.ravencreative.com/scroll/Index.html?scrollto=Interface#parentHorizontalTab2
(where "Interface" might be the name of an anchor of id name at the top of the interface)
I googled and searched stackoverflow and couldn't find anything. Is there some sort of script that would allow this to work? Or is there a better way to do this?
Here's a working example:
http://stage.ravencreative.com/scroll/Index.html
This makes the second tab active:
http://stage.ravencreative.com/scroll/Index.html#parentHorizontalTab2
(#parentHorizontalTab2 is what makes the second tab open by default)
This scrolls to the tabbed interface:
http://stage.ravencreative.com/scroll/Index.html#Interface
(#Interface is the anchor at the beginning of the interface)
But I can't get both to work at the same time. Any suggestions? Is there a way to do something like:
http://stage.ravencreative.com/scroll/Index.html?scrollto=Interface#parentHorizontalTab2 where a script picks up on the scrollto parameter and scrolls to it?
Something like (I'm using English since I am not familiar with the code construct):
if scrollto is found in the URL
then scroll to the anchor defined in the scrollto
You can use a variety of #tabConditionSelector conditions as you described, then on document.ready you can read it and scroll / select and anything else on a case-by-case basis.
Using jQuery:
$( window ).load(function() {
var hash = window.location.hash;
if (hash == "#parentHorizontalTab2") {
var top = document.getElementById("Interface").offsetTop; //Getting Y of target element
window.scrollTo(0, top);
} else if (hash == "#parentHorizontalTab3") {
//select tab 3 etc
}
});
You can use this to scroll to specific location on load from link hash
$(window).load(function () {
var hash = window.location.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 'slow');
});
I have managed to get the smooth scrolling working on a single page using the following code.
Note the HTML link is stored in a header.php and used across multiple pages below is a code snippet:
HTML Script:
<a class="item" href="index.php#contact">
<a name="contact"></a>
JS Script:
$('a[href="index.php#contact"]').click(function (e) { // user clicks on html link
e.preventDefault(); // prevent the default behaviour that occurs in the browser
var targetOffset = $('a[name="contact"]').offset().top; // define a variable to point at a particular section & offset from the top of browser
$('body').animate( // create animation
{ scrollTop: targetOffset }, 1000); // scrollTop property = target variable
});
Problem:
When I go to a different webpage and click the contact link it does not link back to the index.php#contact and scroll down to the contact anchor point.
Any assistance or advice is much appreciated I'm sure its a simple tweak in the code somewhere.
Check your href it's supposed to be: index.php/#contact
I have a web site on based on SkelJS that currently loads a different part of the webpage by appending an #anchor to the url like this:
Note that #blog loads the blog page, the scroll is at the top. Inside the Blog page I need to scroll to a certain article. How can I use two anchors so that something like #blog#article_x would work? I suppose I have to look for a workaround since anchoring 2 ids makes no sense, is there a work around?
Additional notes:
Note that if a change #blog to #article_x it actually goes to the desired article however if someone shares the link it won't go to the article because it will look for #article_x on the homepage, where it does not exists.
Here is a demo of the template I'm using (http://html5up.net/uploads/demos/astral/#) note how the #anchor loads the desired page.
You can use a hash that contains both page and element. Then split and then do your page load then scroll, i.e. #blog,someelement
//on page load or wherever you detect the hash
$(function(){
var hash = window.location.hash;
var ele = null;
//Detect if there is a splitable hash
if(hash.indexOf(",") != -1){
var parts = hash.split(",");
hash = parts[0];
ele = jQuery("#"+parts[1]);
}
//whatever function you do to load the blog page
loadPage(hash,ele);
});
function loadPage(page,ele){
//do page loading
$("#page").load("http://someurl.com",function(){
//if there was no second part to the hash
//this will be skipped
if(ele){
$("html,body").animate({
scrollTop: ele.offset().top
},1000);
}
});
}
JSfiddle Demo
Considering the ID of the element that you want to scroll to is myelement you can use below jquery code to smoothly scroll to it.
$("html,body").animate({scrollTop : $("#myelement").offset().top},1000);
We can scroll to specific div when it has id or class
var $id=window.location.href.split('#')[1];
$('html, body').scrollTop($("#"+$id).offset().top)
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.